深入理解Vue的过度与动画
更新时间：2021年11月19日 15:52:34 作者：维生素D没有用
这篇文章主要为大家介绍了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>
多个元素过度：
第三方动画库：anamite.css库
安装：
引入：在script中 import ‘animate.css'
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
Vue组件化(ref,props, mixin,.插件)详解
这篇文章主要介绍了Vue组件化(ref, props, mixin, 插件)的相关知识,包括ref属性，props配置项及mixin混入的方式，本文通过示例代码多种方式相结合给大家介绍的非常详细，需要的朋友可以参考下2022-05-05
这篇文章主要为大家详细介绍了vue2实现可复用的轮播图carousel组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vue组件文档生成备注详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)
这篇文章主要给大家介绍了关于vue3+vite兼容低版本的白屏问题的相关资料,还给大家介绍了vue打包项目以后白屏和图片加载不出来问题的解决方法,需要的朋友可以参考下2022-12-12
这篇文章主要给大家介绍了关于如何在vue中使用unocss以及基本使用方法的相关资料,unocss是一个即时的原子CSS引擎,它可以让你用简短的类名来控制元素的样式,而不需要写复杂的CSS代码,需要的朋友可以参考下2023-07-07
在微信小程序中，可以使用全局配置和使用开发、体验、生产环境的地址，这篇文章主要介绍了Vue微信和uniapp配置环境地址,需要的朋友可以参考下2023-07-07
解决vite.config.js无法使用__dirname的问题
这篇文章主要介绍了解决vite.config.js无法使用__dirname的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue -- webpack 项目自动打包压缩成zip文件的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
ECharts是一个强大的画图插件，在vue项目中，我们常常可以引用Echarts来完成完成一些图表的绘制，本文就来和大家介绍一下如何在Vue项目中引入ECharts吧2023-03-03
这篇文章主要介绍了vue3的沙箱机制的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
最新评论