浅谈CSS3动画的回调处理方法-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

浅谈CSS3动画的回调处理方法

高洛峰

Mar 07, 2017 am 11:59 AM

我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？

CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。

1、transition

对于transition，可以监听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(&#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

对于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>

就是关于CSS3动画回调处理的一些内容，最近在做H5页面时用到了，总结一下。

以上这篇浅谈CSS3动画的回调处理就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多浅谈CSS3动画的回调处理方法相关文章请关注PHP中文网！

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Begitu banyak pautan warnaApr 13, 2025 am 11:36 AM

Di sana ' s telah menjalankan alat, artikel, dan sumber tentang warna akhir -akhir ini. Tolong izinkan saya menutup beberapa tab dengan membulatkannya di sini untuk keseronokan anda.

Bagaimana margin automatik berfungsi di flexboxApr 13, 2025 am 11:35 AM

Robin telah menutupi ini sebelum ini, tetapi saya telah mendengar kekeliruan mengenainya dalam beberapa minggu yang lalu dan melihat orang lain menikam menerangkannya, dan saya mahu

Melangkah Rainbow Garis bawahApr 13, 2025 am 11:27 AM

Saya sangat suka reka bentuk tapak sandwic. Di antara banyak ciri yang indah ialah tajuk utama ini dengan garis bawah Rainbow yang bergerak ketika anda menatal. Ia ' s tidak

Tahun Baru, pekerjaan baru? Let ' s membuat resume berkuasa grid!Apr 13, 2025 am 11:26 AM

Banyak reka bentuk resume yang popular membuat sebahagian besar ruang halaman yang tersedia dengan meletakkan bahagian dalam bentuk grid. Mari kita gunakan grid CSS untuk membuat susun atur yang

Salah satu cara untuk memecahkan pengguna dari kebiasaan tambah nilai terlalu banyakApr 13, 2025 am 11:25 AM

Tambah nilai halaman adalah satu perkara. Kadang -kadang kita menyegarkan halaman apabila kita fikir ia tidak bertindak balas, atau percaya bahawa kandungan baru tersedia. Kadang -kadang kita hanya marah

Reka bentuk yang didorong oleh domain dengan ReactApr 13, 2025 am 11:22 AM

Terdapat panduan yang sangat sedikit tentang cara mengatur aplikasi front-end di dunia React. (Hanya gerakkan fail sehingga ia "terasa betul," lol). Kebenaran

Mengesan pengguna yang tidak aktifApr 13, 2025 am 11:08 AM

Kebanyakan masa anda tidak benar -benar peduli sama ada pengguna secara aktif terlibat atau tidak aktif sementara pada aplikasi anda. Tidak aktif, makna, mungkin mereka

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo sentiasa hebat dengan integrasi. Mereka mempunyai integrasi dengan aplikasi tertentu, seperti Monitor Kempen, MailChimp, dan TypeKit, tetapi mereka juga

See all articles