在transition中还可以通过设置javascript钩子函数,实现自定义动画效果。
以实现击球效果为例:
代码解析:
效果
el.offsetWidth;
// 动画完成后的样式
el.style.transform = "translate(550px,350px)";
// 动画的持续时间
el.style.transition = "all 3s ease";
// done 其实是 afterEnter() 的引用
done();
},afterEnter(el) {
// 动画完成之后调用
this.flag = !this.flag
}
}
})
完整代码
<Meta charset="UTF-8">
nofollow" rel="stylesheet">