课程大纲
- (1)多元素过渡
- (2)多组件过渡
- (3)列表过渡
- (4)动画封装
多元素过渡
- 首先介绍下如何实现多元素过渡
(1)利用条件编译指令v-if与v-else实现多元素内容切换.
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/89767fa24c79fe27743c12f9e73e51dd.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/464682daeedcf6f9e254b5e5724a5819.png)
- (2)接下来在内容切换基础上,添加过渡动画,例如渐隐渐现效果
1、transition添加name属性命名
2、设置过渡状态
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f2a75fa3f4185f6ebd8939ff5106e08c.png)
- (3)状态管理
测试后发现并没有过渡效果,分析原因Vue在多个元素切换过程中会尽量复用DOM,如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,由此产生一系列的bug.。
方案:给多元素添加不同key进行状态管理
此时再切换时,因为有了key,vue便不会再向下复用,代码如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4654f2cd6b57b1b6faed6e239b931850.png)
多元素过渡-案例练习
- 多元素过渡可以通过v-if条件指令进行控制
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a76f6562399bad690929c5f80e4fbf2e.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/51bd2217e696f83ecfcd507ef7dd14ca.png)
- 点击验证后发现,在过渡过程中area区域被重绘了,一个离开过渡的时候另一个开始进入过渡。
- 这是
<transition>
的默认行为 - 即进入和离开同时发生。
方案:在元素绝对定位时候运行正常:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c4c0730102db695f2edc3420b74ef241.png)
- 也可以给元素加上转换属性,实现滑动过渡的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/802d3f885a7db2588ab3e9f6e4867376.png)
多元素过渡-过渡模式
- 同时生效的进入和离开的过渡不能满足所有要求,所以 Vue 提供了两种过渡模式。
①in-out:新元素先进行过渡,完成之后当前元素过渡离开(不是经常用到,但对于一些稍微不同的过渡效果还是有用的)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/084245d5d40c7ef7f671450d28d9973c.png)
②out-in:当前元素先进行过渡,完成之后新元素过渡进入
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b9468f0f3bad6adb4bd97e5d1f353c9b.png)
多组件过渡
- 【多组件过渡】
接下来介绍下多组件实现过渡效果,代码如下,直接将多元素修改为多组件即可
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0e635460ad68a7e842c95cfc45518299.png)
- 多组件过渡也可以结合动态组件进行操作,首先写个基础动态组件案例,如下所示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2b86c123ee495e1f119c9cefb0d6fd9a.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6b9db2ec061ffd7095a3f3f996c4fbda.png)
- 接下来添加transition过渡
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/72131ee28f82bcf82289954dc6fcd5c0.png)
列表过渡
- 目前为止,仅仅实现了单个&&多个元素、单个&&多个组件的过渡动画,接下来介绍下针对列表增删时做的一些过渡动画操作。
(1)首先将基础架构搭建好,要求点击按钮时添加新内容到列表尾部
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7f43ad4a9030d89c8b4b9e664c3bb704.png)
(2)目前为止已经实现点击添加效果,如下所示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/56c1e3c482060294c8ffe34202a5dc36.png)
- 之前的一些过渡动画效果都是针对单个元素组件的隐藏展示,或者多个元素组件来回切换的动画效果,接下来介绍下列表过渡效果,即列表增删改动数据时的过渡动画。
- 列表过渡动画标签
<transition-group></transition-group>
- (1)对于列表过渡需要用到列表过渡标签
transition-group
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e74593bee1db7e70d2ad7354b236de4a.png)
- (2)定义CSS过渡效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/33b4ddc26543f2b7e05eb0d3f67fa532.png)
此时上图再次点击便实现了列表过渡切换效果
动画封装
- 前言
如果部分效果在页面里应用较多,可以对其进行动画封装,以方便日后调用 - 步骤:
(1)首先创建基础动画,即简单的显隐切换动画,如下所示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/348ccda921fc0c2c81e78437f3f538f5.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3b165ed693a112bf88d900dca79c5c1c.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/79cb6b1ac842ee0209137b1855524908.png)
- (2)封装动画组件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/51f2c365429ae37f0ca699fc684174e2.png)
这里使用了props传值&&slot插槽 - (3)调用组件
组件内部为了响应slot插槽,所以需要填入对应DOM元素,同时传入参数
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1b912c54587d4db5e38b14ae75101945.png)
- 目前为止已经实现了对动画的封装,可以任意次调用,如下所示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5f27aee7e0daa4e6b266283914931d9b.png)
- (4)改良版—JS动画
动画的封装不仅可以使用CSS实现,同时也可以借助动画钩子,使用JS实现动画效果。
即将如下的CSS动画代码也封装到组件里
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/568804f857737b80efe7b27dc5d15ff3.png)
(4)改良版—JS动画
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3af72ffd3620f6753e5bd9e6286dde0a.png)
动画封装具体代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画封装</title>
<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.demo {
width: 200px;
height: 200px;
background: red;
}
.demo1 {
width: 200px;
height: 200px;
background: green;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 2s;
}
.fade-enter-to,
.fade-leave {
opacity: 1;
}
</style>
</head>
<body>
<div id="root">
<fade :status="status">
<div class="demo">我是展示内容1</div>
</fade>
<fade :status="status">
<div class="demo1">我是展示内容2</div>
</fade>
<button @click="handleClick">toggle</button>
</div>
<script type="text/javascript">
Vue.component('fade', {
props: {
status: Boolean
},
template: `
<transition name="fade" model="out-in">
<slot v-if="status"></slot>
</transition>
`
})
var root = new Vue({
el: '#root',
data: {
status: true
},
methods: {
handleClick() {
this.status = !this.status;
}
}
})
</script>
</body>
</html>