分享一个监听css3动画(animation)结束事件实例

零下一度
풀어 주다: 2017-05-18 14:29:27
원래의
5114명이 탐색했습니다.

当css3的animation完成一个动画,我们想让动画保持在终止的状态或其他一些事件,要怎么做呢?

我们可以监听 webkitAnimationEnd 事件就可以

// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() { console.log("动画结束"); })
로그인 후 복사

-webkit-animation动画有三个事件:

开始事件: webkitAnimationStart
结束事件: webkitAnimationEnd
重复运动事件: webkitAnimationIteration

// 动画开始时事件o.addEventListener("webkitAnimationStart", function() { console.log("动画开始"); })// 动画重复运动时事件o.addEventListener("webkitAnimationIteration", function() { console.log("动画重复运动"); })// 动画结束时事件o.addEventListener("webkitAnimationEnd", function() { console.log("动画结束"); })
로그인 후 복사

示例:

webkitAnimationEnd

로그인 후 복사

css3的过渡属性transition,在动画结束时,也存在结束的事件:webkitTransitionEnd

注意:transition 仅有这一个事件

【相关推荐】

1.详细介绍CSS3中animation-direction属性

2.必须掌握的CSS3动画(Animation)的8大属性

3.利用animation属性实现循环间的延时执行实例教程

4.详解css3中两种暂停方式(transition、animation)

위 내용은 分享一个监听css3动画(animation)结束事件实例의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!