Vue封装的过度与动画

最新推荐文章于 2022-11-09 10:16:46 发布

欢乐多~

最新推荐文章于 2022-11-09 10:16:46 发布

阅读量70

点赞数

分类专栏： Vue学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lql19970816/article/details/125020474

版权

11 篇文章 0 订阅

订阅专栏

作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
图示：<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />
写法：
准备好样式：
1. 元素离开的样式：
  1. v-leave：离开的起点
  2. v-leave-active：离开过程中
  3. v-leave-to：离开的终点
2. 元素进入的样式：
  1. v-enter：进入的起点
  2. v-enter-active：进入过程中
  3. v-enter-to：进入的终点
3. 使用<transition>包裹要过度的元素，并配置name属性：
```
<transition name="hello">
	<h1 v-show="isShow">你好啊！</h1>
</transition>
```
  备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值

关注