过程
- 设置
animation
属性为none
- 触发浏览器重画样式或布局,参考What forces layout / reflow,这里使用
offsetHeight
属性 - 设置
animation
属性为""
,以重新继承css样式。
代码
代码中使用了vue,但并不影响理解。。。
<template>
<div id="app">
<button @click="startAnim">开始动画</button>
<div>
<i ref="fly" class="iconfont icon-send icon-anim anim" ></i>
</div>
</div>
</template>
<script>
import Utils from "@/Utils/Utils"
import $ from "jquery"
export default {
name: "test",
methods:{
startAnim(){
$(this.$refs.fly).css("animation","none");
this.$refs.fly.offsetHeight;
$(this.$refs.fly).css("animation","");
}
}
}
</script>
<style scoped>
.icon-anim{
position: relative;
}
.anim{
animation: anim 2s;
}
@keyframes anim {
from{
left:0;
}
50%{
left:50%;
}
to{
left:0;
}
}
</style>
方法二
启动动画时添加class,动画结束后去掉class。修改startAnim
方法:
$(this.$refs.fly).addClass("anim");
$(this.$refs.fly).on("animationend",()=>$(this.$refs.fly).removeClass("anim"));