transitionEnd和animationEnd的一个临时解决方案
transtionEnd需要添加前缀,并且存在多次触发问题,animationEnd也需要添加前缀,下面是一个临时性解决方案,解决了部分问题,完美方案探索中
(function(){ var body=document.body || document.documentElement, style=body.style; var vendorPrefix=(function(){ var i=0, vendor=["Moz", "Webkit", "Khtml", "O", "ms"]; transition=transition.charAt(0).toUpperCase() + transition.substr(1); while (i < vendor.length) { if (typeof style[vendor[i] + transition] === "string") { return vendor[i]; } i++; } return false; })(); var transitionEnd=(function(){ var transEndEventNames = { WebkitTransition : 'webkitTransitionEnd', MozTransition : 'transitionend', OTransition : 'oTransitionEnd otransitionend', transition : 'transitionend' } for(var name in transEndEventNames){ if(typeof style[name] === "string"){ return transEndEventNames[name] } } })(); var animationEnd=(function(){ if(vendorPrefix=="Webkit"){ return "webkitAnimationEnd"; }else{ return "animationend"; } }()); //解决多次触发问题,transitionEnd在多个属性变化时候会触发多次,子元素也会冒泡,造成父元素事件触发 //解决不触发问题,duration后检查是否触发,未触发则强制触发 function addTransitionEndOnce(ele,fn,duration){ var called = false; var callback = function(){ if (!called){ fn(); called = true; } }; var callbackEnd = function(){ callback(); setTimeout(callback, duration); ele.removeEventListener(transitionEnd, callbackEnd); } ele.addEventListener(transitionEnd, callbackEnd); } window.vendorPrefix = vendorPrefix; window.transitionEnd = transitionEnd; //animationEnd只加前缀,自行注册事件即可,不存在多次问题 window.animationEnd = animationEnd; window.addTransitionEnd = addTransitionEnd; });
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
2017-07-05 css3动画总结