【CSS】@starting-styleについて

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

CSSの@starting-styleについてのメモ。

@starting-styleはトランジション開始時のスタイル指定

@starting-styleはトランジションされる要素にCSSのプロパティ開始値を指定します。

例えば、以下のようなコードになります。

<button class="button">ボタン</button>
<div class="box"></div>
button {
  background-color: orange;
  padding: 10px;
  margin: 20px;
}


.box {
  inline-size: 100px;
  max-inline-size: 100px;
  block-size: 50px;
  background-color: red;
  display: none;

  margin: 10px;

}

@starting-style {
  .box {
    inline-size: 0;

  }

}
.box.add {
  display: block;
  transition: inline-size 2s;
}
const button = document.querySelector(".button");

button.addEventListener("click", () => {
  const openContent = document.querySelector(".box");
  openContent.classList.toggle("add");
});

See the Pen @starting-style by kuma0605 (@kuma0605) on CodePen.

ボタンをクリックすると、要素の横幅がするっと表示されます。

以下の部分で、トランジション開始時の初期のスタイルを指定しています。以下の場合だと要素の横幅は0pxを初期値に設定しています。

@starting-style {
  .box {
    inline-size: 0;
  }
}

display:none;が指定されている要素にはトランジションが効きませんでしたが、@starting-styleを使えばトランジションを設定することができます。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧