vue过渡动画transition标签+animate.css

最近在优化公司官网时遇到的问题,在此记录一下,以免忘记。

transition标签介绍

进入/离开的6个class切换

  1. v-enter:定义进入过度的开始状态。在元素被插入之前生效,在元素被插入后的下一帧移除。
  2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
  3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
  4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
  5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
  6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

mode过度模式
in-out:新元素先进行过渡,完成之后当前元素过渡离开。

out-in:当前元素先进行过渡,完成之后新元素过渡进入。

animate.css

安装animate.css

cnpm install animate.css -save

调用animate.css
main.js

import 'animate.css

如何将animate和transition结合起来


				
	

如果是动态组件切换,只需要包裹router-view占位符,如果transition标签包裹在组件上,则会发生要离开的组件在执行离开动画的同时,即将进入的组件同时执行进入动画。这样就会导致同一个位置同时出现两个组件,导致布局错乱。

这里只是介绍一种常用的transition结合animate的用法,更多详细请访问vue官网教程

你可能感兴趣的:(适合初学者,vue过渡动画)