transition标签与transition属性

 transition标签

transition标签是Vue内置动画标签，负责在插入、更新、移除DOM元素时，给元素添加样式

注意：transition标签只能包含一个元素 且包含的标签需要设置v-if/v-show控制元素显示

动画样式类名

Vue2

进入： .v-enter 始状态、 v-enter-to 末状态、 .v-enter-active 进入动画

离开：.v-leave 始状态、v-leave-to 末状态、.v-leave-active 离开动画

Vue3

进入：.v-enter-from 始状态、.v-enter-to 末状态、.v-enter-active 进入动画

离开：.v-leave-from 始状态、.v-leave-to 末状态、.v-leave-active 离开动画

transition标签属性

1.name属性

用于自动生成css动画类名

若transition没有设置name

<transition>
    <router-view></router-view>
</transition>

v-enter {}
v-enter-active{}

若transition有设置name

<transition name="router-fade">
    <router-view></router-view>
</transition>

router-fade-enter{}
router-fade-enter-active{}

2.mode属性

设置过渡模式

先离开后进入

<transition name="fade" mode="out-in">

先进入后离开

<transition name="fade" mode="in-out">

transition属性

css3过渡效果，将某一个css属性值进行变化

基本属性

transition: [改变属性] [变化时间] [速度曲线] [延迟时间]

 可以改变属性

1. 所有数值属性，例如width,height,left,top,vorder-radius

2. 背景颜色和文字颜色

3. 所有变形