display:none;を指定した要素にもアニメーションする

はじめに

メニューをホバーしたら、サブメニューが表示させるヘッダーを制作していたときの話。
メニューをホバーしたらdisplay: none;で指定していたサブメニューをdisplay: block;に変更させるとき、transitionが効かなかった。（フワッと表示されない）

なので解決策をまとめてみました。

解決法

keyframesとjQueryを使う。
任意のタイミング（例ではhoverイベント時）にクラスを付与する（例の場合、show）

index.html

<ul class="header_menu">
  <li>About</li>
  <li>News</li>
  <li>
    <p class="main_menu">Category</p>
    <ul class="sub_menu">
      <li>Head</li>
      <li>Body</li>
      <li>Hand</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

style.css

.sub_menu {
  display: none;
  transition: 0.5s;
}
.sub_menu.show {
  display: block;
  animation: show 1s linear 0s;
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

index.js

$('.main_menu').hover(
    function() {
      //マウスカーソルが重なった時の処理
      $('this').next('.sub_menu').addClass('show');
    },
    function() {
      $('this').next('.sub_menu').removeClass('show');
    }
);

おわりに

display: none;を指定している要素をフワッと表示させるにはkeyframsとjQueryの処理が必要。
HTMLとCSSで完結させたい場合は、opacityプロパティとvisibilityプロパティで実現させるもいい。