Meaningless Notebook

我輩は雑記帖である。名はまだない。

【CSS】Animation を再実行する18

posted by

玖堂恵
in

Animation を持つクラスを付けたり外したりすれば勝手に再実行されるもんだと思ってた (小並感)。

MDN がグッドスタッフを提供してた

document.querySelector(".box").className = "box";

window.requestAnimationFrame(function (time) {

    window.requestAnimationFrame(function (time) {
        document.querySelector(".box").className = "box changing";
    });
});

CSS Animation を持つクラスを外してから、window.requestAnimationFrame ～の 2 連入れ子の中で CSS Animation を持つクラスを付けてあげると CSS Animation が再生される。

奇妙な実装だけど入れ子なのがミソらしく、1 回目が再描画依頼、2 回目が再描画直前に CSS Animation を持つクラスを付けてやって再描画させる…テクニックらしい、知らんけど。

知らないことばっかりだ…

参考元