2019年10月23日

cssアニメーション|autoを指定すると意図した動きにならない!?

cssアニメーション|autoを指定すると意図した動きにならない!?

CSSアニメーションでautoを指定すると意図した方法にならない!?

お世話になっております。佐藤です。
今回はCSSアニメーションのheightで若干詰まったことのある事象について書いていこうと思います。

まずは以下をご覧ください。

最近実装したハンバーガーメニュです。
これを実装する際、忘れていたことがありました。以下は実装した時の最初のコードです。ハンバーガをクリックすると#navに「active」クラスを付与しています。

意図した動きにならないコードの例

HTML

<header id="header">
  <button type="button" id="humberger" class="btn d-lg-none">
    <i class="fal fa-bars"></i>
  </button>
  <nav id="nav">
    <ul>
      <li>
        <a href="#sec1">
          <span class="en">Rink1</span>
          <span class="ja">リンク1</span>
        </a>
      </li>
      <li>
        <a href="#sec2">
          <span class="en">Rink2</span>
          <span class="ja">リンク2</span>
        </a>
      </li>
      <li>
        <a href="#sec3">
          <span class="en">Rink3</span>
          <span class="ja">リンク3</span>
        </a>
      </li>
      <li>
        <a href="#sec4">
          <span class="en">Rink4</span>
          <span class="ja">リンク4</span>
        </a>
      </li>
      <li class="mb-0">
        <a href="#sec5">
          <span class="en">Rink5</span>
          <span class="ja">リンク5</span>
        </a>
      </li>
    </ul>
    <a href="#sec6" class="btn_blue">
      <span class="en">CONTACT</span>
      <span class="ja">お問い合わせ</span>
    </a>
  </nav>
</header>

CSS

#humberger.active {
  transform: rotate(90deg);
  transition: .7s;
}
#nav {
  height: 0;
  overflow: hidden;
  transition: .7s;
}
#nav.active {
  height: auto;
  overflow: auto;
  transition: .7s;
}

上記のコードで確認するとこんな感じになります。

どこが原因か分かりますか?
経験したことのある方ならすぐにピンときたかもしれませんが、正解は「height:auto」が原因です。autoを指定した時にはtransitionが効かないんです。「auto」は普段は役に立つ値ですが、アニメーションを設定したい際は上記のように意図しない動きになることが多いので、注意が必要です。(これはwidthでも起こります。)

意図したコードの例

なので最終的には以下のコードに直しました。(HTMLは同じ)

#humberger.active {
  transform: rotate(90deg);
  transition: .7s;
}
#nav {
  height: 0;
  overflow: hidden;
  transition: .7s;
}
#nav.active {
  /*以下のように高さを指定してあげる!*/
  height: 376px;
  overflow: auto;
  transition: .7s;
}

こうするとanimationが効いて、意図するアニメーションに設定することができました。ちょっとしたことですが重要な部分だと思いますので、復習にも活用してみて下さい。