原生CSS动画回调事件
2014-09-03 08:31
246 查看
原文链接: Detecting
CSS Animation Completion with JavaScript
原文日期: 2014年02月20日
翻译日期: 2014年02月21日
翻译人员: 铁锚
2014年对于我的web开发生涯来说有一个难以承认的事实,那就是传统的JavaScript 工具库几乎都快死了。许多年来我们一直依赖于工具类库进行开发,但现在 JavaScript 和 CSS 本身已经提供了绝大多数我们需要的特性. 如果我们静下心来研究这些原生的功能,那么就可以减少JavaScript工具库的使用。我经常听到一个坚持使用工具库的原因是CSS动画不提供回调。
Wrong. False. Incorrect. ¿Que? JavaScript确实提供了在 JS 动画和过渡完成后触发回调的功能。
查看示例请点击这里!
JavaScript代码
涉及此段JavaScript的唯一原因是需要考虑浏览器的前缀。 transitionend 事件和
animationend 事件是标准浏览器使用的,但基于webkit的浏览器仍然依赖于前缀,所以我们必须先确定事件的前缀,然后才能调用:
[javascript] view
plaincopy
/* From Modernizr */
function whichTransitionEvent(){
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd',
'MsTransition':'msTransitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
/* 监听 transition! */
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
console.log('Transition 完成! 原生JavaScript回调执行!');
});
/*
在 "whichTransitionEvent" 中,可以将 "transition"文本替换为 "animation",则处理的就是动画,此处代码省略...)
*/
在动画/过渡效果完成后,将会触发回调函数. 因为不需要那些很重量级的类库支持就能实现,在很多时候应该是很有用的。
想象一下,不使用类库我们可以节省多少的代码量. 比如 duration, fill-mode, 以及 delay 我们都可以通过 CSS 进行设置,如此一来,JavaScript将变得更加的轻量化,感觉生活又美好了一些!
CSS Animation Completion with JavaScript
原文日期: 2014年02月20日
翻译日期: 2014年02月21日
翻译人员: 铁锚
2014年对于我的web开发生涯来说有一个难以承认的事实,那就是传统的JavaScript 工具库几乎都快死了。许多年来我们一直依赖于工具类库进行开发,但现在 JavaScript 和 CSS 本身已经提供了绝大多数我们需要的特性. 如果我们静下心来研究这些原生的功能,那么就可以减少JavaScript工具库的使用。我经常听到一个坚持使用工具库的原因是CSS动画不提供回调。
Wrong. False. Incorrect. ¿Que? JavaScript确实提供了在 JS 动画和过渡完成后触发回调的功能。
查看示例请点击这里!
JavaScript代码
涉及此段JavaScript的唯一原因是需要考虑浏览器的前缀。 transitionend 事件和
animationend 事件是标准浏览器使用的,但基于webkit的浏览器仍然依赖于前缀,所以我们必须先确定事件的前缀,然后才能调用:
[javascript] view
plaincopy
/* From Modernizr */
function whichTransitionEvent(){
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd',
'MsTransition':'msTransitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
/* 监听 transition! */
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
console.log('Transition 完成! 原生JavaScript回调执行!');
});
/*
在 "whichTransitionEvent" 中,可以将 "transition"文本替换为 "animation",则处理的就是动画,此处代码省略...)
*/
在动画/过渡效果完成后,将会触发回调函数. 因为不需要那些很重量级的类库支持就能实现,在很多时候应该是很有用的。
想象一下,不使用类库我们可以节省多少的代码量. 比如 duration, fill-mode, 以及 delay 我们都可以通过 CSS 进行设置,如此一来,JavaScript将变得更加的轻量化,感觉生活又美好了一些!
相关文章推荐
- 原生CSS动画回调事件
- 原生CSS动画回调事件
- 原生CSS动画回调事件
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画
- [CSS] 点击事件触发的动画
- CSS动画效果的回调
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd
- Css 动画的回调
- Css 动画的回调
- JQuery学习笔记(六)——css操作、事件处理和动画
- 动画事件回调
- Unity3D Animator 动态添加事件回调和替换动画
- CSS3动画效果——js调用css动画属性并回调处理详解
- 原生JS实现CSS动画效果
- 手机轮播组件—支持事件回调和队列(原生js)
- css动画效果回调处理
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画
- 原生js判断css动画结束 css 动画结束的回调函数
- Css 动画的回调
- .NET 指南:事件与回调