vue transition标签用法

transition标签

是Vue的内置动画标签，在插入/更新/移除DOM元素时，在合适的时候给元素添加样式类名（配合css样式使用，实现动画效果）

注意：
1.transition标签只能包含一个元素；如果里面写了多个元素，则只生效第一个。
2.transition包裹的标签需要设置v-show/v-if属性控制元素的显示

动画css样式对应的类名

进入：.v-enter始状态、.v-enter-to末状态、.v-enter-active进入动画（vue2）
离开：.v-leave始状态、.v-leave-to末状态、.v-leave-active离开动画（vue2）
进入：.v-enter-form始状态、.v-enter-to末状态、.v-enter-active进入动画（vue3）
离开：.v-leave-form始状态、.v-leave-to末状态、.v-leave-active离开动画（vue3）

配合animation

效果：按钮点击时 h1渐隐渐显

<template>
    <div>
        <button @click="showTra = !showTra">隐藏/显示</button>
        <!-- Vue 的内置动画标签 transition -->
        <transition>
            <!-- 只能包含 1 个元素 -->
            <h1 v-show="showTra">组件动画效果</h1>
            <!-- 需要设置 v-show / v-if 属性控制元素的显示 -->
        </transition>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return { showTra: true };
    },
};
</script>

<style>
//transition没有设置name属性  所以动画类名为 v-xxx
.v-enter-active {
  animation: move 2s;
 }
 .v-leave-active {
     animation: move 2s reverse;
 }

 @keyframes move {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
</style>

transition标签属性

name属性：用于自动生成css动画类名
如果transition标签元素没有设置那么属性，则对应的动画类名为v-xxx
如果设置了name属性，则对应的动画类名为 属性值-xxx
appear 属性：一开始就生效显示动画

当存在多个 tansition 标签时，我们可以通过 name 属性给各个 transition 标签指定不同的 CSS 动画效果

<template>
    <div>
        <button @click="showTra = !showTra">隐藏/显示</button>
        <!-- Vue 的内置动画标签 transition -->
        <transition name="move1">
            <!-- 只能包含 1 个元素 -->
            <h1 v-show="showTra">组件动画效果</h1>
            <!-- 需要设置 v-show / v-if 属性控制元素的显示 -->
        </transition>
        <transition name="move2">
            <!-- 只能包含 1 个元素 -->
            <h1 v-show="showTra">组件动画效果</h1>
            <!-- 需要设置 v-show / v-if 属性控制元素的显示 -->
        </transition>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return { showTra: true };
    },
};
</script>

<style>
//transition没有设置name属性  所以动画类名为 v-xxx
.move1-enter-active {
  animation: move 2s;
 }
 .move1-leave-active {
     animation: move 2s reverse;
 }
.move2-enter-active {
  animation: move 4s;
 }
 .move2-leave-active {
     animation: move 4s reverse;
 }

 @keyframes move {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
</style>

transition-group标签

transition标签只能包含一个元素、transition-group标签可以包含多个元素
transition-group标签里面的元素需要设置key属性，作为当前元素的唯一标识

<template>
    <div>
        <button @click="showTra = !showTra">隐藏/显示</button>
        <transition-group apper>
            <h1 v-if="showTra" key="ceshi">组件动画效果</h1>
            <h1 v-if="!showTra" key="ceshi1">组件动画效果1</h1>
        </transition>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return { showTra: true };
    },
};
</script>

<style>
h1 {
    transition: 0.5s;
    position: absolute;
}
.v-leave {
    opacity: 1;
}
.v-leave-to {
    opacity: 0;
}
.v-enter {
    opacity: 0;
}
.v-enter-to {
    opacity: 1;
}
</style>

如果只有两个元素，也可以给一个元素的key设置不同的状态来代替v-if和v-else，上面的例子可以重写为

<template>
    <div>
        <button @click="showTra = !showTra">隐藏/显示</button>
        <transition-group apper>
            <h1 :key="showTra">{{ isEditing ? "组件动画效果" : "组件动画效果1" }}</h1>
        </transition>
    </div>
</template>

有一个动画库animate.css