css3中transition和animation的回调处理
弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬_┬)看来还是要再接再励啊w(゚Д゚)w
言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transitionend事件和animationend事件,如果我们需要在动画执行完毕后,
进行一些其他操作,只需要给这两个事件添加相应的回调函数即可.
如果你css基础不够,请看这里: 张鑫大大关于css3动画的简介
如果你向深入研究这个问题,请看这里:蜗牛大大讲transition事件处理
值得注意的是当transition动画修改了元素的N个属性值时,就会触发N次transitionend事件,因此需要定义一个handleTransitionEndfn函数来处理多次触发的问题,
代码如下:
var handleTransitionEndfn=function(ele,fn,duration){
var flag=0;
//每次触发transitionend事件都会执行callback()
var callback=function(){
fn();
flag=1;
}
ele.addEventListener("webkitTransitionEnd", function(){
callback();
//防止winphone不能触发事件
setTimeout(callback(), duration);
}, false)
}
下面是transition回调处理的示例:
html结构:
<div class="trans_box"></div>
css样式:
<style>
*{
margin:0;
padding:0;
}
.trans_box{
width: 100px;
height: 100px;
margin:100px;
background-color:orange;
-webkit-transition:all 1s ease-out;
}
</style>
js代码:
<script type="text/javascript">
window.onload=function(){
var trans_box=document.querySelector(".trans_box");
trans_box.onclick=function(){
trans_box.style.backgroundColor="pink";
trans_box.style.webkitTransform="translateX(200px) scale(2) rotate(360deg)";
}
var handleTransitionEndfn=function(ele,fn,duration){
var flag=0;
// 当transition事件完成后需要执行的函数;
var callback=function(){
if(!flag){
fn();
flag=1
}
};
ele.addEventListener("webkitTransitionEnd", function(){
callback();
// 考虑兼容winphone
setTimeout(callback, duration);
},false)
};
function transitionEndfn(){
alert("transition事件成功加载!")
}
handleTransitionEndfn(trans_box,transitionEndfn,"2s");
}
</script>
下面animation回调处理示例:
html结构同上下
css样式如下:
<style>
*{
padding:0;
margin:0;
}
.anim_box{
width: 100px;
height: 100px;
background-color: lightgreen;
margin:100px;
transition:all 2s ease;
}
@keyframes move{
0%{
opacity: 1;
}
50%{
opacity: 0.8;
-webkit-transform:rotate(360deg);
}
100%{
background-color: pink;
opacity: 0.3;
}
}
</style>
js代码:
<script>
var anim_box=document.querySelector(".anim_box");
anim_box.onclick=function(){
anim_box.style.webkitAnimation="move 2s";
}
anim_box.addEventListener("webkitAnimationEnd", function(){
alert("animation事件加载成功!")
}, false)
</script>
css3中transition和animation的回调处理的更多相关文章
- 弄清 CSS3 的 transition 和 animation
弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...
- CSS3动画 transition和animation的用法和区别
transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C IE -ms- Chrome/Safari -webkit- Firefoc - ...
- 2018年1月17日总结 css3里transition 和animation 区别
transition 和animation两个CSS3属性经常被用到实际项目中,想把它整理出来. 1.先介绍transition >>>>> a. 在做项目中经常会遇见 ...
- css3中transition属性详解
css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...
- Vue中transition和animation的使用
一:二者的对比 1.动画循环就用animation.在animation中有一个animation-iteration-count属性可以定义循环次数.transition是执行一次以后就不会执行,但 ...
- css3,transition,animation两种动画实现区别
我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js. 其实通常情况下,对于使用js我们更加倾向于使用css来设置动画. transfrom ...
- css3中transition和display的坑
不知道大家做css3动画的时候遇到过这种情景没? 用opacity实现淡入淡出的效果.噢!good!一切正常 给个栗子: <!DOCTYPE html> <html> < ...
- css3中trastion,transform,animation基本的了解
毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也.虽然 ...
- css3中什么时候用transition什么时候用animation实现动画
在css3中transition和animation都可以实现动画效果,但是我们什么时候用transition,什么时候用animation. 当有事件触发动画的时候我们就用transition.比如 ...
随机推荐
- JAX-WS使用Handler Chain加工消息
承前 本文的示例,是基于前一篇文章中的实例而改进的,如果想要运行本文的代码例子,需要先实现前一篇的代码. 前一篇文章JAX-WS开发WebService初级 Handler概念 在WebService ...
- ajax提交表单+前端验证小示例
<script src="http://css.jj.cn/js/jquery.js" type="text/javascript"></sc ...
- mysql授权
grant all privileges on testdb to userA@'%' 然而通过userA登录查看存储过程时仍然无权限查看,通过jdbc连接程序也报错, 之前mysql在windows ...
- SQL表关联赋值、系统表、表数据删除
1. 表与表的关联赋值(用于表与表之间有关联字段,数据互传) 双表关联赋值 UPDATE #B SET #B.D=#A.B from #B inner join #A on #B.C=#A.A 多表关 ...
- [WPF]UserControl的MouseWheel事件触发
用户控件: <UserControl> <Grid> <TextBox x:Name="textBlock" HorizontalAlignment= ...
- Mybatis + Mysql 插入数据时中文乱码问题
近日跟朋友一起建立一个项目,用的是spring+mybatis+mysql. 今天碰到一个mybatis向mysql中插入数据时,中文显示为'???'的问题,拿出来说下. 对于数据库操作中出现的中文乱 ...
- mybatis入门总结
背景: 最近“大胆地”把原本一个通过简单的JDBC连接数据库进行修改和查找操作的小项目改成用mybatis了.. 周四得到任务,周一要完成的,说是要添加查询条件和添加查询字段,修改的字段也多了几个,才 ...
- thinkPHP的用法之创建新项目
1 配置文件中 新增数组元素:'DEFAULT_APPS'=> array('api', 'admin', 'home', 'megagame'), 2 新增样式变量 在view.class.p ...
- jQuery对象与dom对象的转换
一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的 ...
- java 简单数组元素的增删改查
public class Test { static int[] a = new int[20]; static int n; public static void main(String[] arg ...