css3动画监听以及暂停

MobService 发布于2019-08-20 12:19 / 2763人阅读

摘要：为一个元素添加一个动画之后你还在用来延迟下一个动作了，你啦下面这些绝对是装逼的知识点。

为一个元素添加一个动画class之后你还在用settimeout来延迟下一个动作了，你out啦
下面这些绝对是装逼的知识点。

1.animation动画监听

-webkit-animation动画其实有三个事件：
开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration

dom.addEventListener("webkitAnimationStart", function(){ //动画开始时事件 
    console.log("start"); 
}, false); 
dom.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 
    console.log("end"); 
}, false); 
dom.addEventListener("webkitAnimationIteration", function(){ //动画重复运动时的事件
    console.log("end"); //第一遍动画完成输出end
}, false);

2.transition动画监听

this动画只有webkitTransitionEnd这一个事件

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

ps以上都没有做兼容的处理

这样我们就可以用很少的settimeout来做连贯的动画效果了,但是同一个元素的多个动画效果可能需要嵌套，想了想如果同一个元素为啥不直接在一个animation里都完成呢，这个可能要具体情况具体分析了

3.animation动画停止

当你把动画设置无限的时候，用什么方法把他停止在当前画面呢

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

公众号

我们的主页

服务器托管云服务器 css3动画 js 暂停动画 js监听视频暂停高性能css3动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80917.html

前端动画调研-V1

摘要：支持动画状态的，在动画开始，执行中，结束时提供回调函数支持动画可以自定义贝塞尔曲线任何包含数值的属性都可以设置动画仓库文档演示功能介绍一定程度上，也是一个动画库，适用所有的属性，并且实现的能更方便的实现帧动画，替代复杂的定义方式。动画调研-V1 前言：动画从用途上可以分为两种，一种是展示型的动画，类似于一张GIF图，或者一段视频，另一种就是交互性的动画。这两种都有具体的应用场景，比如...

ddongjian0000 2019-08-23 11:00 评论0 收藏0
H5打造属于自己的视频播放器（JS篇2）

摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。回顾算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播...

sPeng 2019-08-21 14:17 评论0 收藏0
H5打造属于自己的视频播放器（JS篇2）

摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。回顾算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播...

bang590 2019-08-01 15:37 评论0 收藏0
两种方案开发小程序动画

摘要：通过这种方法产生的动画，无法按照原有轨迹收回，所以在事件之后设置了定时器，定义在执行动画之后，执行另一个动画。方式存在较多局限性动画只能执行一次，循环效果需要通过定时器完成。在普通的网页开发中，动画效果可以通过css3来实现大部分需求，在小程序开发中同样可以使用css3，同时也可以通过api方式来实现。指路：小程序animatiom动画API API解读小程序中，通过调用api来...

MingjunYang 2019-08-23 12:58 评论0 收藏0