質問: メインメニューを開くとサブメニューも開いてしまう いつもお世話になっております。スマホ画面でハンバーガーメニューを開くと中のサブメニューも一緒に開いてしまいます。サブメニューは『商品一覧』の横にある十字ボタンで開くようにしたいのですが、たぶんjsでheader全体のis-activeが開くようになっているのが原因なような気がするのですが、現在使用しているやり方以外で方法が浮かびません。なにか他に参考になるような方法がございましたら、ご教示していただきたいです。
回答: ecマスターズの田中です。transitionを利用する際、displayプロパティの切り替え(noneとそれ以外)を行っているとアニメーションが無効化されてしまいます。そのため、いただいたテストページにて、切り替え前後におけるdisplayの指定は双方削除した上で、たとえば.header_nav に対して opacity:0;.is-opened .header_nav に対して opacity:1;など、変化前後の値をそれぞれ指定することで、上記の場合はフェードイン・アウトのようななめらかな動作を実現することができます。