一、作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名
二、图示
三、写法:
- 元素进入的样式
v-enter
|v-enter-active
|v-enter-to
- 元素离开的样式
v-leave
|v-leave-active
|v-leave-to
- 使用
transition
包裹要过渡的元素,并配置name
属性:
<transition><h1 v-show="isShow">哈哈哈</h1>
</transition>
- 如果有多个元素需要过渡,则需要使用
<transition-group>
,并且里面的元素都要指定key
值
<transition-group appear><h1 v-show="!isShow" :key="1">哈哈哈</h1><h1 v-show="isShow" :key="2">哈哈哈</h1>
</transition-group>