Vue之transition动画

demo:

transition使用

    运动东西(元素，属性、路由....)

class定义：

1. .fade-enter{ } 进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)
2. .fade-enter-active{ } 进入过渡的结束状态，元素被插入时就生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。.fade-enter-active{ } 进入过渡的结束状态，元素被插入时就生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
3. .fade-leave{ } 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；.fade-leave{ } 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
4. .fade-leave-active{ } 离开过渡的结束状态，元素被删除时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。.fade-leave-active{ } 离开过渡的结束状态，元素被删除时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

自定义过度类名

默认的.fade-enter变成.fade-in-enter;
默认的.fade-enter-active变成.fade-in-active;
默认的.fade-leave变成.fade-out-enter;
默认的.fade-leave-active变成.fade-out-active;

transition相关函数

 methods:{
    beforeEnter(){
        console.log('动画enter之前');
    },
    enter(){
        console.log('动画enter进入');
    },
    afterEnter(){
        console.log('动画进入之后');
    },
    beforeLeave(){
        console.log('动画leave之前');
    },
    leave(){
        console.log('动画leave');
    },
    afterLeave(){
        console.log('动画leave之后');
    }
  }

过度效果mode属性指定：

transition-group过度多个容器，需要设置key值

      
      
Hello