av人人干_女狠狠噜天天噜日日噜_国产精品一区二区免费_亚洲国语自产一区第二页_免费av观看_已婚少妇露脸日出白浆_国产精品探花视频_久久国产精品2020免费_国产精品好好热av在线观看_亚洲另类春色校园小说

網(wǎng)站建設(shè)知識

我們將想法與焦點與您一起共享

當(dāng)前位置:深圳網(wǎng)站建設(shè) > 網(wǎng)站建設(shè)知識> CSS3動畫的回調(diào)處理

CSS3動畫的回調(diào)處理

2015/1/23 15:42:34 獨占網(wǎng)絡(luò) 網(wǎng)站建設(shè)知識
我們在做js動畫的時候，很多時候都需要做回調(diào)處理， 如在一個動畫完成后觸發(fā)一個事件、一個動畫完成后執(zhí)行另外一個動畫等等，但在使用CSS3動畫時能不能捕獲到運動的狀態(tài)做回調(diào)處理呢？

CSS3動畫也是可以做回調(diào)處理的，這里分為兩個屬性，一個是transition，另外一個是animation。

1、transition

對于transition，可以監(jiān)聽transitionend事件，當(dāng)動畫完成時觸發(fā)，可以這樣使用：

<!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('動畫執(zhí)行完畢！');
                // callback here
            }, false);
        }
    </script>
</head>
<body>
    <div class="rect"></div>
</body>
</html>
2、animation

對于animation我們可以監(jiān)聽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('動畫執(zhí)行完畢！');
                // callback here
            }, false);
        }
    </script>
</head>
<body>
    <div class="rect"></div>
</body>
</html>
始終專注高端網(wǎng)站建設(shè)服務(wù) 網(wǎng)站建設(shè)案例服務(wù)方案聯(lián)系

聯(lián)系我們

135-3000-5572
151-1257-9390

地址：深圳市龍崗區(qū)橫崗街道力嘉創(chuàng)意文化產(chǎn)業(yè)園338

郵箱：chenmh@sz886.com

我們的優(yōu)勢

12年建站服務(wù)經(jīng)驗自主開發(fā)后臺CMS開發(fā)項目不外包無隱形收費

服務(wù)198家上市企業(yè)服務(wù)行業(yè)龍頭超過70家 營銷型網(wǎng)站建設(shè)完備的項目流程管理體系網(wǎng)頁設(shè)計與網(wǎng)站開發(fā)技術(shù)并重

關(guān)于獨占網(wǎng)絡(luò)

十多年來，憑借對設(shè)計的深刻理解，對互聯(lián)網(wǎng)營銷趨勢的敏銳洞察，獨占網(wǎng)絡(luò)不斷修正服務(wù)導(dǎo)向，完善創(chuàng)作品格，始終注重專業(yè)探索，為所有合作企業(yè)機構(gòu)全力以赴，確保網(wǎng)站的視覺體驗與營銷轉(zhuǎn)化能力。

我們是一群對互聯(lián)網(wǎng)抱有執(zhí)著信念的技術(shù)控。從2012年到現(xiàn)在，公司從未建過強大的營銷團隊，卻憑著作品與服務(wù)不斷保持增長，做到了"桃李不言，下自成蹊。" 我們堅信：每個客戶都是一條渠道，每個案例都是一個廣告，為企業(yè)插上翅膀，助力企業(yè)轉(zhuǎn)型升級，我們已做好準(zhǔn)備。

專業(yè)團隊為您提供深圳網(wǎng)站建設(shè)、深圳網(wǎng)站制作、深圳營銷型網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)等服務(wù)，深圳建網(wǎng)站就找獨占網(wǎng)絡(luò) | 12年專注網(wǎng)站建設(shè)

深圳市獨占網(wǎng)絡(luò)科技有限公司 |備案號：粵ICP備15007128| Copyright 2025,ALL Rights Reserved www.ykfic.cn | Copyright 2025版權(quán)所有
Hi,Are you ready? 如果您有意向
請于我們?nèi)〉寐?lián)系。

有一個互聯(lián)網(wǎng)項目想和我們談?wù)剢幔?br>您可以填寫右邊的表格，讓我們了解您的項目需求，這是一個良好的開始，我們將會盡快與你取得聯(lián)系。當(dāng)然也歡迎您給我們寫信或是打電話，讓我們聽到你的聲音！

獨占-整合互聯(lián)網(wǎng)營銷

地址：深圳市龍崗區(qū)橫崗地鐵A出口力嘉創(chuàng)意文化產(chǎn)業(yè)園338
大客戶專線：深圳 13530005572
售前QQ：1447567909
E-mail： sales@sz886.cn

合作意向表
您希望我們?yōu)槟峁┦裁捶?wù)？
主站蜘蛛池模板： 丰都县| 岳池县| 鄂州市| 东兰县| 宁强县| 扎鲁特旗| 开原市| 米脂县| 宿迁市| 崇州市| 建阳市| 吉木萨尔县| 太原市| 长治市| 新乐市| 白银市| 陆河县| 哈尔滨市| 宜昌市| 赞皇县| 伊春市| 清水河县| 高要市| 老河口市| 修水县| 东方市| 泰兴市| 长顺县| 民丰县| 凯里市| 阿鲁科尔沁旗| 宿迁市| 克山县| 和顺县| 灌阳县| 乌海市| 麻阳| 突泉县| 徐汇区| 监利县| 平原县|