Vue中的过度怎么实现，实现动画效果的写法是什么-群英

上一篇：JS数组方法中会修改和不会修改原数组的方法是什么下一篇：基于JS怎么实现简易的刮卡效果，方法是什么

这篇文章主要介绍“Vue中的过度怎么实现，实现动画效果的写法是什么”，有一些人在Vue中的过度怎么实现，实现动画效果的写法是什么的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

1.在插入、更新、移除DOM元素时，在合适的时候给元素添加样式类名

2.元素有一个进入过程：Enter，一个离开过程Leave。

两个过程都有一个初始态（）和终止态（-to）和两态之间的过度效果（activate）

3.写法

动画：写好v-enter-active（替换come这个名字）和v-leave-active（替换go）（这两个是vue的工作）和动画atguigu（这个是css3的效果）。再用<transition>把动画元素包起来就行。appear是让元素一加载就执行一次v-enter-activate

过度：这里的起点终点是vue的作用。

或者

<style scoped>
/* .todo-enter-active{
    animation: myAnamite 1s;
}
.todo-leave-active{
    animation: myAnamite 1s reverse;
}
@keyframes myAnamite {
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0);
    }
} */
.todo-enter,.todo-leave-to{
    transform: translateX(-100%);
}
.todo-leave,.todo-enter-to{
    transform: translateX(0);
}
.todo-enter-active,.todo-leave-active{
    transition: 1s linear;
}
</style>

多个元素过度：