亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

css3動(dòng)畫監(jiān)聽(tīng)以及暫停

MobService / 3007人閱讀

摘要：為一個(gè)元素添加一個(gè)動(dòng)畫之后你還在用來(lái)延遲下一個(gè)動(dòng)作了，你啦下面這些絕對(duì)是裝逼的知識(shí)點(diǎn)。

為一個(gè)元素添加一個(gè)動(dòng)畫class之后你還在用settimeout來(lái)延遲下一個(gè)動(dòng)作了，你out啦
下面這些絕對(duì)是裝逼的知識(shí)點(diǎn)。

1.animation動(dòng)畫監(jiān)聽(tīng)

-webkit-animation動(dòng)畫其實(shí)有三個(gè)事件：
開(kāi)始事件 webkitAnimationStart
結(jié)束事件 webkitAnimationEnd
重復(fù)運(yùn)動(dòng)事件 webkitAnimationIteration

dom.addEventListener("webkitAnimationStart", function(){ //動(dòng)畫開(kāi)始時(shí)事件 
    console.log("start"); 
}, false); 
dom.addEventListener("webkitAnimationEnd", function(){ //動(dòng)畫結(jié)束時(shí)事件 
    console.log("end"); 
}, false); 
dom.addEventListener("webkitAnimationIteration", function(){ //動(dòng)畫重復(fù)運(yùn)動(dòng)時(shí)的事件
    console.log("end"); //第一遍動(dòng)畫完成輸出end
}, false);

2.transition動(dòng)畫監(jiān)聽(tīng)

this動(dòng)畫只有webkitTransitionEnd這一個(gè)事件

dom.addEventListener("webkitTransitionEnd", function(){
    console.log("end");
}, false);

ps以上都沒(méi)有做兼容的處理

這樣我們就可以用很少的settimeout來(lái)做連貫的動(dòng)畫效果了,但是同一個(gè)元素的多個(gè)動(dòng)畫效果可能需要嵌套，想了想如果同一個(gè)元素為啥不直接在一個(gè)animation里都完成呢，這個(gè)可能要具體情況具體分析了

3.animation動(dòng)畫停止

當(dāng)你把動(dòng)畫設(shè)置無(wú)限的時(shí)候，用什么方法把他停止在當(dāng)前畫面呢

原文鏈接:http://azq.space/blog/css3-an...

公眾號(hào)

我們的主頁(yè)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80917.html

相關(guān)文章

  • 前端動(dòng)畫調(diào)研-V1

    摘要：支持動(dòng)畫狀態(tài)的，在動(dòng)畫開(kāi)始，執(zhí)行中，結(jié)束時(shí)提供回調(diào)函數(shù)支持動(dòng)畫可以自定義貝塞爾曲線任何包含數(shù)值的屬性都可以設(shè)置動(dòng)畫倉(cāng)庫(kù)文檔演示功能介紹一定程度上，也是一個(gè)動(dòng)畫庫(kù)，適用所有的屬性，并且實(shí)現(xiàn)的能更方便的實(shí)現(xiàn)幀動(dòng)畫，替代復(fù)雜的定義方式。 動(dòng)畫調(diào)研-V1 前言：動(dòng)畫從用途上可以分為兩種，一種是展示型的動(dòng)畫，類似于一張GIF圖，或者一段視頻，另一種就是交互性的動(dòng)畫。這兩種都有具體的應(yīng)用場(chǎng)景，比如...

    ddongjian0000 評(píng)論0 收藏0

  • H5打造屬于自己的視頻播放器（JS篇2）

    摘要：回顧算了不回顧了直接搞起，打開(kāi)中寫的播放視頻播放按鈕隱藏視頻開(kāi)始播放當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播放按鈕將會(huì)隱藏，播放視頻，這個(gè)不難，在中我們就已經(jīng)實(shí)現(xiàn)。 回顧 算了不回顧了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打開(kāi)JS1中寫的bvd.js 播放視頻 播放按鈕隱藏 視頻開(kāi)始播放 當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播...

    sPeng 評(píng)論0 收藏0

  • H5打造屬于自己的視頻播放器（JS篇2）

    摘要：回顧算了不回顧了直接搞起，打開(kāi)中寫的播放視頻播放按鈕隱藏視頻開(kāi)始播放當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播放按鈕將會(huì)隱藏，播放視頻，這個(gè)不難，在中我們就已經(jīng)實(shí)現(xiàn)。 回顧 算了不回顧了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打開(kāi)JS1中寫的bvd.js 播放視頻 播放按鈕隱藏 視頻開(kāi)始播放 當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播...

    bang590 評(píng)論0 收藏0

  • 兩種方案開(kāi)發(fā)小程序動(dòng)畫

    摘要：通過(guò)這種方法產(chǎn)生的動(dòng)畫，無(wú)法按照原有軌跡收回，所以在事件之后設(shè)置了定時(shí)器，定義在執(zhí)行動(dòng)畫之后，執(zhí)行另一個(gè)動(dòng)畫。方式存在較多局限性動(dòng)畫只能執(zhí)行一次，循環(huán)效果需要通過(guò)定時(shí)器完成。 在普通的網(wǎng)頁(yè)開(kāi)發(fā)中，動(dòng)畫效果可以通過(guò)css3來(lái)實(shí)現(xiàn)大部分需求，在小程序開(kāi)發(fā)中同樣可以使用css3，同時(shí)也可以通過(guò)api方式來(lái)實(shí)現(xiàn)。 指路：小程序animatiom動(dòng)畫API API解讀 小程序中，通過(guò)調(diào)用api來(lái)...

    MingjunYang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

MobService

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<