ホームページ > 記事 > ウェブフロントエンド > CSS3のコールバック処理animation_html/css_WEB-ITnose
CSS3のコールバック処理animation_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:52:39884ブラウズ
jsアニメーションを行う際、1つのアニメーションが完了したらイベントをトリガーしたり、1つのアニメーションが完了したら別のアニメーションを実行したりするなど、コールバック処理が必要になることが多いのですが、CSS3アニメーションを使用するとキャプチャできるのでしょうか？モーション状態のときのコールバック処理はどうなるでしょうか?
CSS3 アニメーションはコールバックでも処理できます。1 つはトランジション [w3c ドキュメント]、もう 1 つはアニメーション [w3c ドキュメント] の 2 つの属性に分かれています。
1. トランジション
トランジションの場合、アニメーションの完了時にトリガーされる、transitionend イベントをリッスンできます。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3-transitionend - BeyondWeb</title> <style> * {margin: 0; padding: 0;} .rect { width: 100px; height: 100px; background-color: #f80; -webkit-transition: all .5s; } </style> <script> window.onload = function () { var _rect = document.querySelector('.rect'); _rect.onclick = function () { _rect.style.webkitTransform = 'translateX(300px)'; } _rect.addEventListener('webkitTransitionEnd', function () { alert('动画执行完毕！'); // callback here }, false); } </script></head><body> <div class="rect"></div></body></html> 2. アニメーションの場合、サンプルコードは以下の通りです:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3-animationend - BeyondWeb</title> <style> * {margin: 0; padding: 0;} .rect { position: relative; width: 100px; height: 100px; background-color: #f80; } @-webkit-keyframes move { from { -webkit-transform: rotate(0); } to { -webkit-transform: rotate(360deg); } } </style> <script> window.onload = function () { var _rect = document.querySelector('.rect'); _rect.onclick = function () { _rect.style.webkitAnimation = 'move 3s'; } _rect.addEventListener('webkitAnimationEnd', function () { alert('动画执行完毕！'); // callback here }, false); } </script></head><body> <div class="rect"></div></body></html> 以上、CSS3のアニメーションコールバック処理について、最近H5ページを作る際に使用したものをまとめてみます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。