CSS3 애니메이션의 콜백 처리 방법에 대한 간략한 논의-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3 애니메이션의 콜백 처리 방법에 대한 간략한 논의

高洛峰

Mar 07, 2017 am 11:59 AM

js 애니메이션을 할 때 한 애니메이션이 완료된 후 이벤트를 트리거하거나, 한 애니메이션이 완료된 후 다른 애니메이션을 실행하는 등 콜백 처리를 해야 하는 경우가 많은데 CSS3 애니메이션을 사용하면 캡처할 수 있나요? 모션 상태에 대한 콜백 처리는 어떻습니까?

CSS3 애니메이션도 콜백으로 처리할 수 있습니다. 두 가지 속성으로 나누어집니다. 하나는 전환[w3c 문서]이고 다른 하나는 애니메이션[w3c 문서]입니다.

1. Transition

전환의 경우 애니메이션이 완료될 때 트리거되는 전환 종료 이벤트를 사용할 수 있습니다.

<!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(&#39;.rect&#39;);   
            _rect.onclick = function () {   
                _rect.style.webkitTransform = &#39;translateX(300px)&#39;;   
            }   

            _rect.addEventListener(&#39;webkitTransitionEnd&#39;, function () {   
                alert(&#39;动画执行完毕！&#39;);   
                // callback here   
            }, false);   
        }   
    </script>
</head>
<body>
    <p class="rect"></p>
</body>
</html>

로그인 후 복사

2. animation

애니메이션의 경우 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(&#39;.rect&#39;);   
            _rect.onclick = function () {   
                _rect.style.webkitAnimation = &#39;move 3s&#39;;   
            }   

            _rect.addEventListener(&#39;webkitAnimationEnd&#39;, function () {   
                alert(&#39;动画执行完毕！&#39;);   
                // callback here   
            }, false);   
        }   
    </script>
</head>
<body>
    <p class="rect"></p>
</body>
</html>

로그인 후 복사

최근 H5 페이지를 만들 때 사용했던 CSS3 애니메이션 콜백 처리에 대한 내용입니다.

CSS3 애니메이션의 콜백 처리에 대해 간략하게 설명한 위 글은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠고, PHP 중국어 홈페이지에 많은 지원 부탁드립니다.

CSS3 애니메이션의 콜백 처리 방법에 대한 더 많은 관련 글은 PHP 중국어 홈페이지를 주목해주세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.