html5监听动画结束,js判断css动画是否完成 animation,transition
气死了,发现这些鸟人讲事情都讲一半,害死初学者。
css动画有两种,animation,transition,所以分开来讲。
1、animation:
css定义 #left1{}
html定义:
那么我们就用#left1来获取元素:
/* 监听变换事件! */
var e = document.getElementById("left1");
e.addEventListener("animationend", function() {
alert('css3运动结束!');
});
这里有提到多浏览器的支持:http://www.w3cboy.com/post/2014/03/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8js%E6%8D%95%E8%8E%B7css3%E5%8A%A8%E7%94%BB/
2、transition:
这个网上比较多,我也看了,结果跟我的animation对不上,放上来给大家参考了:
var e = document.getElementById("left1");
//var e = document.getElementsByClassName('left2right')[0];
function whichTransitionEvent(){
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd',
'animationstart':'animationend',
'webkitAnimationStart':'webkitAnimationEnd',
'MSAnimationStart':'MSAnimationEnd',
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(function() {alert('css3运动结束');
}); 这下清楚了吧?
html5监听动画结束,js判断css动画是否完成 animation,transition相关推荐
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- js写css字体,js如何写出css动画 ?js写css动画的方法(代码)
本篇文章给大家带来的内容是关于js如何写出css动画 ?js写css动画的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 使用setTimeout()或者setInter ...
- java计算器监听放大缩小,js监听页面放大缩小
demo body[zoom='scale']:before{ content: '您的网页处于缩放状态,请按 Ctrl+0 恢复到浏览器默认大小'; z-index: 9999; position: ...
- js 和 css动画
js和css动画 使用setTimeout()或者setInterval()使用这两个函数定时调用一段代码.这是其原理. 目的,重复修改内联样式,达到动画的效果 通过在相同的时间内构造出一帧帧的内容, ...
- JS 触发CSS动画
JS 触发CSS动画 效果是点击后 会像抽屉一样进行收缩
- html5监听动画结束,css3动画是否结束监听事件
css3动画是否结束监听事件: var domObj = $("#id"); domObj [0].addEventListener("webkitAnimationEn ...
- 【微信小程序】 模拟帧动画图片 模拟音频播放gif动画 监听音频播放状态 css3 @keyframes 动画 背景图片设置
没有播放时isPlaying为false,当点击时,开始播放,调用循环动画,再点击时,就停止. 图片 wxml 判断是否正在播放 通过 isPlaying 来判断. <!-- 音频 --> ...
- 小程序 onPageScroll监听滚动结束
需求:当用户滑动页面的时候切换品牌的页签缩退,当用户停止滑动的时候页签展示完全 HTML代码: <!-- OnePlus/OPPO的切换 --><viewv-if="cur ...
- 二、Vue基础语法学习笔记——事件监听v-on、条件判断(v-if、v-else-if、v-else、v-show)、循环遍历(v-for遍历数组对象,key属性、检测数组更新)、图书案例、双向绑定
四.事件监听 在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等 在Vue中如何监听事件呢?使用v-on指令 v-on介绍 作用:绑定事件监听 ...
最新文章
- 每秒处理240万帧游戏画面,AI训练成本降低80%,谷歌开源RL并行计算框架
- Tensorflow【实战Google深度学习框架】TensorFlow模型的保存与恢复加载
- postman接口测试实例_postman接口测试实例
- Spark SQL JOIN操作代码示例
- 下拉多选择框 实现方式_非极大值抑制Non-Maximum Suppression(NMS)一文搞定理论+多平台实现...
- 数据库中删除语句Drop、Delete、Truncate的相同点和不同点的比较(举例说明)
- Spark _10_补充部分算子【三】
- react-navigation 跨 tabs 返回首页
- Codeforces Round #330 (Div. 2) B. Pasha and Phone 容斥定理
- c语言高效编程pdf,C语言高效编程的四大绝招
- android连接service,android连接webservice
- python如何使用函数_python中函数使用
- (21)pandas.drop与dropna方法
- 09-1.部署 coredns 插件
- 大话计算机张冬pdf扫描分享,第一章 【PMC分享】《大话存储》作者张冬:OpenPower CAPI简析.pdfx.pdf...
- QProcess实现交互式命令
- RTCM协议阅读——RTCM数据解析
- 【qq语音获取好友ip】wireshark
- 想做合格的产品经理,你需要这个证书
- 用计算机语言写结婚祝福语,[结婚电子显示屏祝福语]电子显示屏结婚贺词