@starting-styleは、2024-08-06にリリースされた Firefoxをもって主要なブラウザすべてで利用可能になりました。
@starting-style はCSSのアットルールで、トランジションさせる要素に設定されるプロパティ群の開始値を定義するために使用します。
MDN Web Docs
@starting-style – CSS: カスケーディングスタイルシート | MDN
@starting-style は CSS のアットルールで、トランジションさせる要素に設定されるプロパティ群の開始値を定義するために使用します。これらのプロパティは、最初に要素の…
従来の CSS 記法では display: none; が指定されている要素にトランジションを使用した場合、トランジションが発生しなかったが、@starting-style ルールを用いてトランジション開始時のスタイルをしているすることで元の要素に display: none; が指定されていたとしても正しくトランジションを発火させることができるようになる。
#target {
display: block;
transition: background-color 1.5s;
background-color: green;
}
@starting-style {
#target {
background-color: transparent;
}
}
#target.hidden {
display: none;
}<button id="button">button</button>
<div id="target" class="hidden">
テスト
</div>const button = document.querySelector("#button");
button.addEventListener("click", () => {
const openContent = document.querySelector("#target");
openContent.classList.remove("hidden");
});非常に便利なので、今後積極的に使っていきたいものだ。
