Vue-transition

基本概念

Vue给我们提供的一个内置组件

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果

使用方法

1.用v-if/v-show控制显示隐藏，使用transition组件控制其变化过程

<template>
    // 子组件
    <transition name="animate1">
        <child></child>
    </transition>
    // if/show控制
    <transition name="animate2">
        <div v-show="isTage"></div>
    </transition>
</template>

2.css样式必须使用特定的类名

以下是官方介绍

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