4_5 CSS Transitionsのイベント

CSS Transitionsのイベントの発生は、CSS Transitionsアニメーションを実行するHTML要素のaddEventListener()メソッドで監視できます。

イベントには次のものがあります。

transitionstartイベント

CSS Transitionsアニメーションがスタートするときに発生する。transition-delayが設定されているときには、その遅延時間が経過した後、発生する。Chromeブラウザはこのイベントをサポートしていない。

transitionendイベント

CSS Transitionsアニメーションが完了したときに発生する。

transitioncancelイベント

CSS Transitionsアニメーションがキャンセルされたときに発生する。たとえば、transition-propertyが削除されたときや、HTML要素のdisplayプロパティにnoneが指定されたときなど。Chromeブラウザはこのイベントをサポートしていない。

addEventListener()メソッドには、TransitionEventオブジェクトが引数として渡されます。このオブジェクトは、次のプロパティを持っています。ただし使い道はあまりないように思えます。

propertyName

CSS Transitionsアニメーションに関係するプロパティ名。

elapsedTime

アニメーションの経過時間。

以下は使用例です。

const img = document.getElementsByTagName('img')[0];
        
img.addEventListener('transitionstart', ()=>{
 console.log('start');
 // transitioncancelを発生させる
 // img.style.display='none';
}, false);

img.addEventListener('transitionend', (e)=>{
 console.log('end');
 console.log(e.propertyName);
 console.log(e.elapsedTime);
}, false);

img.addEventListener('transitioncancel', ()=>{
 console.log('cancel');
}, false);