Vue中使用 transition动画，vue过渡动画

Vue的动画并没有非常炫酷的效果，不过也是有一些实用性的，在项目中有的地方使用，也是能够营造出不同的效果

下面为大家列举两个简单实现动画的例子，动画其实很简单，就是利用transition标签

案例;点击按钮 实现内容切换---动画显示是淡隐淡出的效果

  
     切换按钮
  
 
  
    
hello
  

如果name="fade" 不存在  就默认是 v-enter v-leave ...

class定义：

.fade-enter{ } 进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)

.fade-enter-active{ } 进入过渡的结束状态，元素被插入时就生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

.fade-leave{ } 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；

.fade-leave-active{ } 离开过渡的结束状态，元素被删除时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

 

二、自定义过度类名

    
hello