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> <p class="rect"></p> </body> </html>
2. アニメーションについては、animationendイベントを聞くことができます。サンプルコードは次のとおりです。
<!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> <p class="rect"></p> </body> </html>