过渡与动画
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. 准备好进入的起点样式和终点样式，离开的起点样式和终点样式
如果进入的起点和离开的终点样式相同，可作如下简化，进入的终点和离开的起点样式相同同理
2. 配置过渡时间和是否匀速过渡
配置原则：过渡发生在哪个元素上就为哪个元素配置
配置方式一：在过渡效果元素的标签样式中配置
配置方式二：配置在v-enter/leave-active【进入的整个过程中激活的样式和离开的整个过程中激活的样式】中
在触发过渡效果时，看不到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. 获取
可以通过以下网址获取第三方样式库或动画库
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元素时，在合适的时候给元素添加样式类名。
-
图示：
-
写法：
-
准备好样式：
- 元素进入的样式：
- v-enter：进入的起点
- v-enter-active：进入过程中
- v-enter-to：进入的终点
- 元素离开的样式：
- v-leave：离开的起点
- v-leave-active：离开过程中
- v-leave-to：离开的终点
- 元素进入的样式：
-
使用
<transition>包裹要过度的元素，并配置name属性：<transition name="hello"> <h1 v-show="isShow">你好啊！</h1> </transition> -
备注：若有多个元素需要过度，则需要使用：
<transition-group>，且每个元素都要指定key值。
-
谁需要添加过渡效果和动画效果，transition就包裹在谁上
标签：动画,Vue,CLI,样式,元素,leave,0% From： https://www.cnblogs.com/wzzzj/p/18040001