animationend 事件

djfml 發(fā)布于2019-08-21 16:22 / 1079人閱讀

摘要：動(dòng)畫事件動(dòng)畫播放時(shí)，會(huì)發(fā)生以下三個(gè)事件動(dòng)畫開始后觸發(fā)動(dòng)畫重復(fù)播放時(shí)觸發(fā)動(dòng)畫完成后觸發(fā)注意標(biāo)準(zhǔn)語(yǔ)法都是小寫，兼容大小寫駝峰寫法語(yǔ)法和標(biāo)準(zhǔn)語(yǔ)法舉例動(dòng)畫開始時(shí)事件動(dòng)畫重復(fù)運(yùn)動(dòng)時(shí)事件動(dòng)畫結(jié)束時(shí)事件動(dòng)畫開始動(dòng)畫重復(fù)運(yùn)動(dòng)動(dòng)畫結(jié)束事件

CSS動(dòng)畫事件

CSS 動(dòng)畫播放時(shí)，會(huì)發(fā)生以下三個(gè)事件：

animationstart - CSS 動(dòng)畫開始后觸發(fā)
animationiteration - CSS 動(dòng)畫重復(fù)播放時(shí)觸發(fā)
animationend - CSS 動(dòng)畫完成后觸發(fā)

注意標(biāo)準(zhǔn)語(yǔ)法都是小寫，兼容大小寫駝峰寫法

webkitAnimationStart
webkitAnimationIteration
webkitAnimationEnd

語(yǔ)法

object.addEventListener("webkitAnimationEnd", myScript);  // Chrome, Safari 和 Opera 
object.addEventListener("animationend", myScript);        // 標(biāo)準(zhǔn)語(yǔ)法

舉例

animationend 事件

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

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

相關(guān)文章

借助CSS來管理js事件

摘要：是一門很神奇的語(yǔ)言，很多和它不相干的功能卻能起到很顯著的效果，有些在看起來實(shí)現(xiàn)都有一定的工作量，一句屬性就能輕而易舉的解決，下面來看幾個(gè)例子主要和事件相關(guān)。那么，如何借助來監(jiān)聽這些呢可以從過渡和動(dòng)畫兩個(gè)思路來考慮。 CSS是一門很神奇的語(yǔ)言，很多和它不相干的功能卻能起到很顯著的效果，有些在js看起來實(shí)現(xiàn)都有一定的工作量，CSS一句屬性就能輕而易舉的解決，下面來看幾個(gè)例子（主要和js事件...

codercao 2019-08-23 17:52 評(píng)論0 收藏0
Javascript 對(duì) CSS3 animation 動(dòng)畫的流程的簡(jiǎn)單控制

摘要：的是一個(gè)好東西，能讓頁(yè)面動(dòng)畫更加純凈流暢，但是之前一扯到動(dòng)畫流程的控制比如執(zhí)行完第一個(gè)動(dòng)畫后再執(zhí)行第二個(gè)動(dòng)畫在執(zhí)行某個(gè)動(dòng)作就有點(diǎn)懵逼如果是動(dòng)畫呢，有回調(diào)函數(shù)或者，方便滴狠吶但是呢。。 showImg(https://segmentfault.com/img/remote/1460000006770036); CSS3的animation是一個(gè)好東西，能讓頁(yè)面動(dòng)畫更加純凈流暢，但是之前一...

zhigoo 2019-08-19 18:12 評(píng)論0 收藏0
AlloyTouch全屏滾動(dòng)插件發(fā)布--30秒搞定順滑H5頁(yè)

原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗(yàn)貨 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代碼可以在這里找到。注意，雖然是掃碼體驗(yàn)，但是AlloyTouch.FullPag...

_ivan 2019-08-21 11:21 評(píng)論0 收藏0
讀Zepto源碼之Fx模塊

摘要：綁定過渡或動(dòng)畫的結(jié)束事件綁定過渡或動(dòng)畫的結(jié)束事件，在動(dòng)畫結(jié)束時(shí)，執(zhí)行處理過的回調(diào)函數(shù)。的回調(diào)執(zhí)行比動(dòng)畫時(shí)間長(zhǎng)，目的是讓事件響應(yīng)在之前，如果瀏覽器支持過渡或動(dòng)畫事件，會(huì)在回調(diào)執(zhí)行時(shí)設(shè)置成，的回調(diào)函數(shù)不會(huì)再重復(fù)執(zhí)行。 fx 模塊為利用 CSS3 的過渡和動(dòng)畫的屬性為 Zepto 提供了動(dòng)畫的功能，在 fx 模塊中，只做了事件和樣式瀏覽器前綴的補(bǔ)全，沒有做太多的兼容。對(duì)于不支持 CSS3 過...

luzhuqun 2019-08-21 16:55 評(píng)論0 收藏0