如何用JavaScript探测CSS动画是否已经完成
不啰嗦上代码:
WN:(function(){
var el = $('<fakeelement>'),
transition="transition",
transitionEnd,
animEvent={'start':null,'iteration':null,'end':null},
vendorPrefix; transition = transition.charAt(0).toUpperCase() + transition.substr(1); vendorPrefix=(function(){//现在的opera也是webkit
var i=0, vendor=["Moz", "Webkit", "Khtml", "O", "ms"];
while (i < vendor.length) {
if (typeof el.css(vendor[i] + transition) === "string"){
return vendor[i];
}
i++;
}
return false;
})(); transitionEnd=(function(){
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
}
for(var name in transEndEventNames){
if(typeof el.css(name) === "string"){
return transEndEventNames[name];
}
}
})(); animEvent.end=(function(){
var animEndEventNames = {
WebkitAnimation : 'webkitAnimationEnd',
animation : 'animationend'
}
for(var name in animEndEventNames){
if(typeof el.css(name) === "string"){
return animEndEventNames[name];
}
}
})(); animEvent.iteration=(function(){
var animIterationEventNames = {
WebkitAnimation : 'webkitAnimationIteration',
animation : 'animationiteration'
}
for(var name in animIterationEventNames){
if(typeof el.css(name) === "string"){
return animIterationEventNames[name];
}
}
})(); animEvent.start=(function(){
var animStartEventNames = {
WebkitAnimation : 'webkitAnimationStart',
animation : 'animationstart'
}
for(var name in animStartEventNames){
if(typeof el.css(name) === "string"){
return animStartEventNames[name];
}
}
})(); return {
called:false,
addTranEvent:function(elem,fn,duration){
var self = this;
var fncallback = function(){
if(!self.called){
fn();
self.called = true;
}
};
function hand(){
elem.on(transitionEnd,function(){
//elem.unbind(transitionEnd,arguments.callee);
fncallback();
});
}
setTimeout(hand,duration);
},
addAnimEvent:function(elem,name,fn){
elem.on(animEvent[name],fn);
},
removeAnimEvent:function(elem,name,fn){
elem.unbind(animEvent[name],fn);
},
setStyleAttribute:function(elem,val){
if(Object.prototype.toString.call(val) === "[object Object]"){
for(var name in val){
if(/^transition|animation|transform/.test(name)){
var styleName=name.charAt(0).toUpperCase() + name.substr(1);
elem.css(vendorPrefix+styleName,val[name]);
}else{
elem.css(name,val[name]);
}
}
}
}
};
})(),
怎么调用不用我说了吧,看返回的4个方法:
addTranEvent,addAnimEvent,removeAnimEvent,setStyleAttribute
如何用JavaScript探测CSS动画是否已经完成的更多相关文章
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- 使用javascript和css模拟帧动画的几种方法浅析
我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1 ...
- Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 赞!15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- Animo.js :一款管理 CSS 动画的强大的小工具
Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...
- Odometer使用JavaScript和CSS制作数字滑动效果
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...
随机推荐
- [Node.js] 闭包和高阶函数
原文地址:http://www.moye.me/2014/12/29/closure_higher-order-function/ 引子 最近发现一个问题:一部分写JS的人,其实对于函数式编程的概念并 ...
- Robot Framework自动化测试(六)--- robotremoteserver使用
robotremoteserver 是什么? Python Remote Server for Robot Framework 下载地址:https://pypi.python.org/pypi/ro ...
- 20个漂亮 CSS3 按钮效果及优秀的制作教程
在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验.正如我们都知道的,CSS3在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性.你可以学习这些教程和试验 ...
- SharedPreferences 详解(多进程,存取数组解决方案)
一.SharedPreferences基本概念 文件保存路径:/data/data/<包名>/shared_prefs目录下目录下生成了一个SP.xml文件 SharedPreferenc ...
- 手机端web学习基础--from慕课网
web知识零零散散的知道一些,但总感觉不够系统,遇到问题不知道如何解决,因此特此来系统的学习一下web前端的知识.从慕课网的web基础看起.下面学习http://www.imooc.com/learn ...
- 2013年最佳的16个 Photoshop 设计教程推荐
使用 Photoshop 的时候,没有基础操作知识的话,用起来会非常困难,所以你应该阅读一些教程才能应用它们在你的工作中.在这篇文章中你看到的 Photoshop 教程的集合是2013年发布的最优秀的 ...
- 基于HTML5的WebGL结合Box2DJS物理应用
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是 ...
- swift分号的使用
与其他大部分编程语言不同,Swift 并不强制要求你在每条语句的结尾处使用分号(;),当然,你也可以按照你自己的习惯添加分号.有一种情况下必须要用分号,即你打算在同一行内写多条独立的语句 let yo ...
- 数据结构(C语言第2版)----时间复杂度和单链表
马上要到校招了,复习下相关的基础知识. 时间复杂度是什么? 官方解释: 算法的执行时间需要依据算法所编制的程序在计算机上于运行时所消耗的时间来度量.在算法中可以使用基本的语句的执行次数作为算法的时间复 ...
- JS通过身份证号码获取出生年月日
这里我们讲述一下关于jq根据身份证号码计算出生日期.年龄.性别,有需要的同学可参考一下. 代码如下 复制代码 //获取输入身份证号码 var UUserCard = $("#UUser ...