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>
多个元素过度:

第三方动画库:anamite.css库
安装:

引入:在script中 import ‘animate.css'

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理