本blogはGoogle AdSenseおよび各種アフィリエイト広告を含みます

CSS Transitionアニメーションを終端までスキップする

こんなの必要になることは滅多にないと思いますが、滅多にない機会が来たので調べたことがあります。

動作

説明

function skip(target) {
    var originalProperty = target.style.transitionProperty;

    target.style.transitionProperty = "none";
    
    setTimeout(function() {
        target.style.transitionProperty = originalProperty;
    }, 100);
}

ようするに動作中にtransition-propertyを一時的にnoneにしてやると終端まで飛びます。transition-property: none!importantを書いたclassを付けたり外したりしてやってもいいと思います。

transition-propertyを戻すのが早すぎると一部ブラウザ(手元ではFirefox)でスキップしません。requestAnimationFrame()でいいタイミングになるかと思いましたがダメ。transitionendイベントはそもそも出てないようなのでひとまずsetTimeout()にしましたが、次に動かす前に戻ってさえいればいいので工夫の余地はあるでしょう。まあtransitionを捨てる手もあります。