Vue CLI 系列之（十五）过渡与动画

过渡与动画

Vue封装的过渡与动画

1. 前置知识

CSS 3 动画【2D转换、3D转换、过渡、动画】

参考网站：https://www.runoob.com/css3/css3-animations.html

<h1 v-show="isShow" id="title">显示了</h1>

<style>	
	h1 {
		/* 通过 animation 把 "donghua"动画捆绑到 h1 元素，时长：1 秒，逆向播放*/
		animation: donghua 1s reverse;
	}
	
	/* 通过 @keyframes 定义一个动画，动画名称为 donghua */
	@keyframes donghua{
		/* 规定变化发生的时间，from和to等同于0%和100% */
		from{
			/* transform：应用转换【2D或3D】，这里是2D转换 */
			/* translateX(-100%)：从元素最开始的位置沿着X轴向左平移 100%【如果元素宽度为100px，100%就是100px】的宽度 */
			transform: translateX(-100%);
		}
		to{
			/* translateX(0%)：从元素最开始的位置沿着X轴向右平移 0%【如果元素宽度为100px，0%就是0px】的宽度 */
			transform: translateX(0%);
		}
	}
</style>

注：当动画完成时，会变回初始的样式。

关于translateX

https://blog.csdn.net/qq_41588302/article/details/108486955

2. 动画

准备好样式和动画，样式的名字需要按照规范起名，动画的名字没有要求，可以任意起名。

/* 使用Vue的动画需要事先准备好动画和两个样式，样式名默认为 v-enter-active和 v-leave-active */
/* 其中 v是变化的，默认是v开头，如果transition指定了name属性，就要根据name属性的值来，name属性的应用场景是，当一个模板中要为多个元素设置动画时，可通过name属性区分不同元素的动画效果，如果只有一个元素存在动画效果，name属性是可以不写的 */
.kaka-enter-active {
	/* 通过 animation 把 "donghua"动画捆绑到 h1 元素，时长：1 秒，逆向播放*/
	animation: donghua 1s ;
}

.kaka-leave-active {
	animation: donghua 1s reverse;
}

/* 通过 @keyframes 定义一个动画，动画名称为 donghua */

@keyframes donghua{

  /* 规定变化发生的时间，from和to等同于0%和100% */

  from{

    /* transform：应用转换【2D或3D】，这里是2D转换 */

    /* translateX(-100%)：从元素最开始的位置沿着X轴向左平移 100%【如果元素宽度为100px，100%就是100px】的宽度 */

    transform: translateX(-100%);

  }

  to{

    /* translateX(0%)：从元素最开始的位置沿着X轴向右平移 0%【如果元素宽度为100px，0%就是0px】的宽度 */

    transform: translateX(0%);

  }

}

给准备加动画的元素添加transition元素包裹，Vue就会根据v-show/v-if的值为元素添加准备好的样式，实现显示或隐藏之前播放动画。
```
<button type="button" @click="isShow = !isShow">显示/隐藏</button>
```

显示了



### 3. 过渡

当v-show/v-if的值为true时，Vue会为元素添加三个类名，分别是v-enter、v-enter-active、v-enter-to;

当v-show/v-if的值为false时，Vue会为元素添加三个类名，分别是v-leave、v-leave-active、v-leave-to;



使用过渡的步骤：

1. 准备好进入的起点样式和终点样式，离开的起点样式和终点样式

如果进入的起点和离开的终点样式相同，可作如下简化，进入的终点和离开的起点样式相同同理

![](https://gitee.com/honourer/picturebed/raw/master/vue/微信截图_20221023170759.png)

2. 配置过渡时间和是否匀速过渡

配置原则：过渡发生在哪个元素上就为哪个元素配置

配置方式一：在过渡效果元素的标签样式中配置

![](https://gitee.com/honourer/picturebed/raw/master/vue/微信截图_20221023170902.png)

配置方式二：配置在v-enter/leave-active【进入的整个过程中激活的样式和离开的整个过程中激活的样式】中

![](https://gitee.com/honourer/picturebed/raw/master/vue/微信截图_20221023171111.png)



在触发过渡效果时，看不到Vue将v-enter/leave类名加到元素上，这是为什么？

答：Vue加上了，不过只存在了一帧，一帧之后，Vue就把该样式去掉了，一瞬间加上了，一瞬间又去掉了



如何处理多个元素有同样的过渡效果这种情况？

1. 第一种方式：用\<transition>标签包裹这多个元素

```vue
<transition name="kaka" appear>
	<div v-show="isShow">
		<h1>显示了</h1>
		<h1>hhh</h1>
	</div>
</transition>

注：这种方式不能实现交叉的过渡效果。

第二种方式：用<transition-group>标签包裹这多个元素，每个元素设置一个key属性，并保证每个元素的key属性唯一

<transition-group appear>
	<h1 v-show="isShow" key="1">显示了</h1>
	<h1 v-show="isShow" key="2">显示了</h1>
</transition-group>

注：transition-group标签可以实现交叉的过渡效果【transition-group标签内有两个元素，一个元素使用使条件渲染为true时的样式，一个元素使用使条件渲染为false时的样式】

<!-- 交叉的过渡效果 -->
<transition-group appear>
	<h1 v-show="isShow" key="1">显示了</h1>
	<h1 v-show="!isShow" key="2">显示了</h1>
</transition-group>

注：ul-li结构通常也要使用 transition-group

4. 集成第三方动画

在Vue中，可以通过集成成型的第三方样式库或动画库，快速实现炫酷的效果。

4.1. 获取

可以通过以下网址获取第三方样式库或动画库

npm：https://www.npmjs.com/

4.2 使用

以Animate.css为例，介绍第三方库的使用。

安装

npm install animate.css
引入

import 'animate.css'

注：import 语句引入样式：import 'xxx.css'

使用

<!-- name="animate__animated animate__bounce" 这是固定的 -->
<!-- enter-active-class：指定进入动画的类名 -->
<!-- leave-active-class：指定离开动画的类名 -->
<transition-group 
	name="animate__animated animate__bounce" 
	enter-active-class="animate__backInDown" 
	leave-active-class="animate__backOutUp" 
	appear
>
	<h1 v-show="isShow" key="1">显示了</h1>
</transition-group>

如果Animate.css的动画效果看不到，或者Animate.css的官网提示如下

可能是关闭了“在Windows中显示动画”这一项

参考：https://blog.csdn.net/u014718296/article/details/120681040

5. 总结

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