CSS3のコールバック処理animation_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS3のコールバック処理animation_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:52:39

オリジナル

906 人が閲覧しました

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ページを作る際に使用したものをまとめてみます。