Javascript 对 CSS3 animation 动画的流程的简单控制
CSS3的animation
是一个好东西,能让页面动画更加纯净流畅,但是之前一扯到动画流程的控制(比如执行完第一个动画后再执行第二个动画在执行某个动作)就有点懵逼
如果是jQuery动画呢,有回调函数(或者.promise().done()),方便滴狠呐!但是animation
呢。。呢。。。呢。。。。呢。。。。。呢。。。。。。
粗粗的想一想吧,貌似给元素加上第一个动画的类后根据第一个动画的执行时间来设置个延迟再加入第二个动画的类也是可以实现的,但是总觉得这样不干净,而且setTimeout其实也不是那么的可控,
然后塔哒,就遇到这篇文章你若触发,我就处理,讲的是JS事件响应的,对, 事!件!响!应!。如果动画结束时能有能触发某个事件,JS再监听响应一下,这不就完事儿了吗?
诶,万能的JS还真有
CSS动画事件 animationstart,animationend和animationiteration
看着三个事件名字就知道,这三个事件分别对应动画开始前,动画结束后,动画进行中,不废话了,直接上个demo
实现了个简单的删除动画,第一步让元素出视野,第二步让元素height
和margin,paddind
等都塌陷,最后直接移除元素
<script async src="//jsfiddle.net/waynecz/fd8yz8bh/embed/"></script>
有两个自己觉得要注意的地方写下注释
on('.m1', 'animationend', function() {// this.classList获取的是一个DOMtokenList并不是真的数组所以要转换一下var classlist = Array.prototype.slice.apply(this.classList);// 因为有两个动画,所以要判定是哪一个动画结束了来执行下一阶段if (classlist.indexOf('dnone') == -1) {this.classList.add('dnone')} else {setTimeout(function() {this.parentNode.removeChild(this)}, 1000)}
})on('button', 'click', function() {select('.m1').classList.toggle('leave');
})function select(selector) {return document.querySelector(selector)
}function on(selector, eventName, cb) {select(selector).addEventListener(eventName, cb);
}
这么一看其实也是很简单的哈哈,顺带一提起时transition
过渡动画也有个事件transitionend
。
最后,兼容性
CSS3动画相关属性的兼容性可以看这里
animation
事件,一般只需加两种前缀就可以了
webkit前缀:webkitAnimationStart
MS前缀:MSAnimationStart (IE10+)
比如
Object.prototype.perfixOn = function (eventName, cb) {var perfix = ['webkit', 'MS', '']for (var i = perfix.length - 1; i >= 0; i--) {if (perfix[i] != '') {eventName.replace(/^(\w)/, function ($1) {return $1.toUpperCase()})}this.addEventListener(perfix[i] + eventName, cb, false);}
}
Obj.perfixOn('animationend', cb)
讲的很粗糙,有不正确的地方请多指教
Javascript 对 CSS3 animation 动画的流程的简单控制相关推荐
- html动画曲线快速结束,CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
- CSS3 animation动画,风车旋转、loading、人物走路动画案例
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
- ae制h5文字动画_H5案例分享:CSS3 Animation动画
CSS3 Animation动画 一.@keyframes CSS3中的Animation动画主要的组件是@keyframes,@keyframes这个规则是用来创建动画的.将@keyframes当作 ...
- html动画效果停顿几秒,css3 animation动画执行结束,停顿几秒后重新开始执行
要实现css3 animation动画执行结束,停顿几秒后重新开始执行的效果,首先想到的是延时执行:animation-delay,然后设置animation-iteration-count为infi ...
- CSS3 Animation动画的十二原则
[本文系外部转贴,原文地址:https://cssanimation.rocks/principles/] 编者注:鉴于KM不能插入iframe直接演示效果,只能给链接跳转页面看代码了:(Animat ...
- css3 animation 动画属性简介
animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...
- css3 animation动画事件
当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart //动画開始 An ...
- CSS3 animation动画,循环间的延时执行时间
如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{webkit-animation: ...
- 一次搞懂 CSS3 animation动画中forwards和both的区别
平时会用 animation 实现动画效果,之前一直没有留意 animation-fill-mode 中 forwards 和 both 动画的区别,今天自己动手实现了一下,终于搞懂了. animat ...
最新文章
- 你不知道的18个Python高效编程技巧
- 全网最经典26道Spring面试题总结,终获offer
- gcc 常用命令(逐渐完善)
- java 并发修改_理解和解决Java并发修改异常ConcurrentModificationException
- 在rancher服务器页面添加Host
- 股市投资大师的股市投资名言
- 通过 ANE(Adobe Native Extension) 启动Andriod服务 推送消息(二)
- 关于Java在Linux or Android平台调用.so库
- Bootstrap3 排版-改变大小写
- python-cx_oracle报错“DatabaseError: DPI-1047: 64-bit Oracle Client library cannot be loaded: “
- ie6中容器内浮动元素的border边框不完全显示的bug
- PyTorch学习笔记:PyTorch初体验
- asp.net 2.0中允许一次上传多个文件的设计
- Git之关于本地分支与远程分支
- 设计模式--工厂模式(c++)
- windows批处理命令大全
- 【C++】 【判定质数】 【分解质因数】【筛质数(编制质数表)】
- 游戏后台开发九问(腾讯技术分享实录)
- 计算机wifi无法打开,苹果Mac电脑WiFi无法打开解决办法
- 拯救者Y7000电脑一直呼呼呼 声音很大的解决办法
热门文章
- (How to) Call somatic mutations using GATK4 Mutect2
- GBDT指标重要性计算
- MultiObjective using Evolutionary Algorithms (2) -- Multi-Objective Optimization
- 特来电CMDB应用实践
- Ocelot + IdentityServer4 构建 GateWay
- Linux平台安装MongoDB
- C#创建一个Windows Service
- 三十八、判断服务是否运行及定位问题
- 用txt做数据源和winfrom textbox输入智能提示
- button,submit, image的区别 点onclick后隐藏行