【CSS】スタイルシートだけで下にアニメーションで伸びる領域を作成する方法

スタイルシートだけで下にアニメーションで伸びる領域を作成する場合のメモです。
「transition」を利用する事で簡単に実現できます。

少し面倒なのは縦の領域を表示させる内容に対してぴったりの長さになるようにするには「max-height」を利用したひと手間が必要です。表示させる際（「.base:hover .content」）の「max-height」については実際のコンテンツが超えない高さを指定する必要があります。（例では300pxを指定）

こういったひと手間が必要な理由としては「transition」が「height」対象とした場合「auto」の値が利用できない為です。

<style>
.content{
  max-height: 0;
  overflow: hidden;
  transition: max-height 3s;
  background-color: red;
}
.base:hover .content{
  max-height: 300px;
}
</style>
<div class="base">
hover
	<div class="content">
	content<br />
	content
	</div>
</div>

<style>

.content{

max-height: 0;

overflow: hidden;

transition: max-height 3s;

background-color: red;

}

.base:hover .content{

max-height: 300px;

}

</style>

hover

content<br />

content

</div>

サンプル

この記事は役に立ちましたか？

役に立った (0)
もっと詳しい情報が必要 (0)
情報が古かった (0)
目的の情報では無かった (0)