animationend 事件

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

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

CSS動畫事件

CSS 動畫播放時，會發(fā)生以下三個事件：

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

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

webkitAnimationStart
webkitAnimationIteration
webkitAnimationEnd

語法

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

舉例

animationend 事件

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88456.html

相關(guān)文章

借助CSS來管理js事件

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

codercao 2019-08-23 17:52 評論0 收藏0
Javascript 對 CSS3 animation 動畫的流程的簡單控制

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

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

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

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

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

luzhuqun 2019-08-21 16:55 評論0 收藏0