VUE过渡动画

过渡的类名
6个切换的class 类比生命周期理解

1. v-enter：开始时。元素被插入之前生效，元素插入后的下一帧移除。
2. v-enter-active：生效时。进行中使用，在插入之前生效，在完成之后移除。该类可以定义进入过渡的时间，延迟和曲线函数。
3. v-enter-to：进入过渡的结束状态。在插入之后下一帧生效 ，在完成之后移除。
4. v-leave：离开过渡。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：离开过渡生效时。在离开过渡被触发时立刻生效，在完成之后移除。这个类可以被用来定义离开过渡的时间，延迟和曲线函数。
6. v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效，在过渡/动画完成之后移除。
    

动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

 animation-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过渡动画所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。