覚えておきたい！ CSS で height: 0; から height: auto; へのアニメーション 3 つの方法

2024-04-02

CSS で height: 0; から height: auto; への遷移をアニメーション化する

この解説では、以下の 3 つの方法を紹介します。

方法 1: will-change プロパティと transition プロパティ

アニメーションさせたい要素に will-change: height を設定します。
transition プロパティで height を指定し、アニメーションの duration や timing-function を設定します。

.element {
  will-change: height;
  transition: height 0.5s ease-in-out;
}

.element.active {
  height: auto;
}

方法 2: @keyframes と animation プロパティ

@keyframes で height の変化をアニメーションとして定義します。
アニメーションさせたい要素に animation プロパティで定義したアニメーションを指定します。

@keyframes height-change {
  from {
    height: 0;
  }
  to {
    height: auto;
  }
}

.element {
  animation: height-change 0.5s ease-in-out;
}

.element.active {
  animation-play-state: running;
}

方法 3: calc() 関数

height プロパティに calc() 関数を使って、要素の padding や margin を利用してアニメーションを表現します。

.element {
  height: calc(100vh - 50px);
  transition: height 0.5s ease-in-out;
}

.element.active {
  height: auto;
}

各方法の比較

方法	メリット	デメリット
`will-change`	シンプルで記述量が少ない	古いブラウザでは動作しない
`@keyframes`	アニメーションのカスタマイズ性が高い	記述量が多くなる
`calc()`	シンプルで軽量	高度なアニメーションには不向き

注意点

height: auto; は要素のコンテンツに合わせて高さを自動調整するため、コンテンツが読み込まれる前にアニメーションが開始すると、意図しない動きになる可能性があります。
アニメーションの duration や timing-function は、要素の高さやアニメーションの目的に合わせて調整してください。

<button onclick="toggle()">Toggle</button>

<div class="element"></div>

<script>
function toggle() {
  const element = document.querySelector('.element');
  element.classList.toggle('active');
}
</script>

.element {
  will-change: height;
  transition: height 0.5s ease-in-out;
  height: 0;
  overflow: hidden;
}

.element.active {
  height: auto;
}

<button onclick="toggle()">Toggle</button>

<div class="element"></div>

<script>
function toggle() {
  const element = document.querySelector('.element');
  element.classList.toggle('active');
}
</script>

@keyframes height-change {
  from {
    height: 0;
  }
  to {
    height: auto;
  }
}

.element {
  animation: height-change 0.5s ease-in-out;
  height: 0;
  overflow: hidden;
}

.element.active {
  animation-play-state: running;
}

<button onclick="toggle()">Toggle</button>

<div class="element"></div>

<script>
function toggle() {
  const element = document.querySelector('.element');
  element.classList.toggle('active');
}
</script>

.element {
  height: calc(100vh - 50px);
  transition: height 0.5s ease-in-out;
}

.element.active {
  height: auto;
}

これらのコードを参考に、目的に合った方法で height: 0; から height: auto; へのアニメーションを実装してみてください。

CSS Grid レイアウトを利用することで、JavaScript を使用せずに要素の高さを自動的に調整できます。

<div class="grid-container">
  <div class="element"></div>
</div>

.grid-container {
  display: grid;
  height: 100vh;
}

.element {
  grid-area: 1 / 1;
  height: 0;
  overflow: hidden;
}

.element.active {
  height: auto;
}

flexbox レイアウトを利用することで、height: auto; を設定した要素の高さを、親要素の残りのスペースに合わせて自動的に調整できます。

<div class="flex-container">
  <div class="element"></div>
</div>

.flex-container {
  display: flex;
  height: 100vh;
}

.element {
  flex: 1;
  height: 0;
  overflow: hidden;
}

.element.active {
  height: auto;
}

JavaScript を使用することで、より高度なアニメーションを作成できます。

<button onclick="toggle()">Toggle</button>

<div class="element"></div>

<script>
function toggle() {
  const element = document.querySelector('.element');
  element.classList.toggle('active');

  if (element.classList.contains('active')) {
    // アニメーション処理
  } else {
    // アニメーション処理
  }
}
</script>