过渡的类名
6个切换的class 类比生命周期理解
- v-enter：开始时。元素被插入之前生效，元素插入后的下一帧移除。
- v-enter-active：生效时。进行中使用，在插入之前生效，在完成之后移除。该类可以定义进入过渡的时间，延迟和曲线函数。
- v-enter-to：进入过渡的结束状态。在插入之后下一帧生效 ，在完成之后移除。
- v-leave：离开过渡。在离开过渡被触发时立刻生效，下一帧被移除。
- v-leave-active：离开过渡生效时。在离开过渡被触发时立刻生效，在完成之后移除。这个类可以被用来定义离开过渡的时间，延迟和曲线函数。
- v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效，在过渡/动画完成之后移除。
动画
CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
复制代码
1
2
3animation-duration: 1.8s; //动画持续时间完成 animation-delay: 2s; //动画延迟多久才开始 animation-iteration-count: infinite; //是否循环执行动画
动画库方法
1.直接下载npm i animate
2. AOS.js滚动动画库
第一步.npm insrall aos-save
第二步 在main.js中
import AOS from "aos";
import "../node_modules/aos/dist/aos.css";
Vue.use(AOS)
第三步：在当前组件引入import AOS from "aos";
最后
以上就是潇洒店员最近收集整理的关于VUE过渡动画的全部内容，更多相关VUE过渡动画内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复