遇到的第一个问题: 同一个DOM节点如何监听和控制多个animationend事件?
答案异常简单,就是我们万能的className,为了预防每次动画执行完毕都会调用animationend事件,可以使用 removeClass。
下面是一段简单的代码案例,转至别人
div {
width: 100px;
height: 100px;
background: red;
position: relative;
}
.animation1 {
animation: upin 2s ease;
-webkit-animation: upin 2s ease;
}
.animation2 {
animation:beat .93s infinite ease ;
-webkit-animation:beat .93s infinite ease ;
}
@keyframes upin{
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@-webkit-keyframes upin{
0% {
opacity: 0;
-webkit-transform: translateY(-100%)
}
100% {
opacity: 1;
-webkit-transform: translateY(0)
}
}
@keyframes beat {
0% {-webkit-transform: scale(1)}
15% {-webkit-transform: scale(1.2)}
30% {-webkit-transform: scale(1)}
55% {-webkit-transform: scale(1.1)}
100% {-webkit-transform: scale(1)}
}
@-webkit-keyframes beat {
0% {-webkit-transform: scale(1)}
15% {-webkit-transform: scale(1.2)}
30% {-webkit-transform: scale(1)}
55% {-webkit-transform: scale(1.1)}
100% {-webkit-transform: scale(1)}
}
注意:
1. 只要为DOM节点绑定了animationend事件,不清楚动画的情况下,只要动画完成就会执行
(animationend:“ ”)这种清除方式无效
jQuery.unbind 可以清除,但是会永久清除这个事件,无法再次使用。效果相当于 用 one 去绑定事件
2. 在animationend 事件之外加判断条件无效果,动画结束后,仍然会执行绑定的事件。加条件判断必须在 事件内部。