css之重启动画

过程

1. 设置animation属性为none
2. 触发浏览器重画样式或布局，参考What forces layout / reflow，这里使用offsetHeight属性
3. 设置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"));

参考

• Restart animation in CSS3: any better way than removing the element?
• What forces layout / reflow