不啰嗦上代码:

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动画是否已经完成的更多相关文章

  1. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  2. 使用javascript和css模拟帧动画的几种方法浅析

    我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1 ...

  3. Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  5. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  6. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  7. 赞!15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  8. Animo.js :一款管理 CSS 动画的强大的小工具

    Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...

  9. Odometer使用JavaScript和CSS制作数字滑动效果

    Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...

随机推荐

  1. 测试Servlet生命周期学习笔记

    测试环境:windows xp旗舰版 软件环境:myclipse8.5+tomcat7.0 ****************************************************** ...

  2. Spring定时器,定时执行(quartz)

    这个定时器与继承了timertask的定时器不同的是,这个定时器是更强大的,可以指定每分的第n秒,每天的第n时,每周的.每年的.来定时运行这个定时器.那么下面来讲诉如何使用quartz定时器. spr ...

  3. [New Portal]Windows Azure Virtual Machine (19) 关闭Azure Virtual Machine与VIP Address,Internal IP Address的关系(1)

    <Windows Azure Platform 系列文章目录> 默认情况下,通过Azure Management Portal创建的Public IP和Private IP都是随机分配的. ...

  4. Emit学习(2) - IL - 常用指令介绍

    学习Emit必不可少的, 会使用到IL中间代码. 初见IL代码, 让我有一种汇编的感觉, 让我想起了, 大学时, 学习8051的汇编语言. 多的就不扯了, 直接进入正题, OpCodes指令集是不是有 ...

  5. 使用JSLint提高JS代码质量

    随着富 Web 前端应用的出现,开发人员不得不重新审视并重视 JavaScript 语言的能力和使用,抛弃过去那种只靠“复制 / 粘贴”常用脚本完成简单前端任务的模式.JavaScript 语言本身是 ...

  6. MFC文件操作

    文件操作:二进制文件和文本文件的区别.二进制文件将数据在内存中存在的模式原封不动的搬到文件中,而文本文件是将数据的asc码搬到文件中.首先做一个读写文件的菜单,在CxxView里响应1.C的方式:fw ...

  7. linq 实现动态 orderby

    class Pet { public string Name{get;set;} public int Age{get;set;} } void Main() { Pet[] pets = { }, ...

  8. HTML5中的sessionStorage和localStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

  9. 数据查询语言DQL 与 内置函数(聚合函数)

    数据查询语言DQL 从表中获取符合条件的数据 select select*from表的名字   查询表所有的数据.(select跟from必须一块用 成对出现的) * 表示所有字段,可以换成想要查询的 ...

  10. postgreSQL绝对值

    select * from t where flag=1 order by abs(index) desc