vue 之 Transition && 各种动画实现，一文让你会动画

向右看齐 2023-10-11 21:21 90阅读 0赞

在开发中，如果没有动画的话，整个页面内容的显示和隐藏会非常的生硬！不好看，为了给予一定的用户体验，进入今天的主题

React框架本身并没有提供任何动画相关的API，所以如果需要使用的话可以使用一个第三方库react-transition-group  
Vue中为我们提供了一些内置的组件和对应的API来完成动画  
一、Transition组件  
1.Transition组件的原理  
当插入或删除包含在transition组件中的元素时，vue将会做以下处理

就是 : 会自动把类加入到 transition组件下的根元素中,transition里面只能放单个标签( 组件 )

添加或者删除的class，常用的是如下六个

进入 ：

![0cb12bf0dbca404ca939d4e58604e115.png][]  
离开 :

![153b674f86be47bca1d7bf94dfc95e46.png][]

2、Transition组件中使用transition  
代码  
<template>  
<div class="box">  
<button @click="isShow = !isShow">切换</button>  
  
<transition name="run">  
  
<div v-if="isShow">  
<span>123123123123</span>  
</div>  
</transition>  
</div>  
</template>  
  
<script>  
export default \{  
data() \{  
return \{  
isShow: true  
\};  
\}  
\};  
</script>  
  
<style lang="scss" scoped>  
// 元素开始进入的状态 | 元素离开结束的状态  
.run-enter-from,  
.run-leave-to \{  
opacity: 0;  
\}  
// 元素进入结束的状态 ｜ 元素开始离开的状态。 这里不写也可以！！！！！！  
.run-enter-to,  
.run-leave-from \{  
opacity: 1;  
\}  
// 元素进入 ｜ 结束时，过渡的效果  
.run-enter-active,  
.run-leave-active \{  
// 过渡动画的使用  
transition: opacity 2s linear 0s;  
\}  
</style>  
效果

说明

3、Transition组件中使用animation  
代码  
<style lang="scss" scoped>  
/\*\*  
\* 如果是动画效果，不止一个状态改变  
\* 就只需设置动态jike  
\* \*/  
.run-enter-active \{  
animation: run-scale 1s linear 0s;  
\}  
// 离开的时候设置成相反哒  
.run-leave-active \{  
animation: run-scale 1s linear 0s reverse;  
\}  
@keyframes run-scale \{  
0% \{  
transform: scale(0);  
\}  
50% \{  
transform: scale(1.3);  
\}  
100% \{  
transform: scale(1);  
\}  
\}  
</style>  
效果

4、Transition组件的type属性  
发生在 : 当我们同时使用transition和animation的情况下

代码  
<style lang="scss" scoped>  
// 元素开始进入的状态 | 元素离开结束的状态  
.run-enter-from,  
.run-leave-to \{  
opacity: 0;  
\}  
// 元素进入结束的状态 ｜ 元素开始离开的状态  
.run-enter-to,  
.run-leave-from \{  
opacity: 1;  
\}  
// 元素进入 ｜ 结束时，过渡的效果  
.run-enter-active,  
.run-leave-active \{  
// 过渡动画的使用  
transition: opacity 2s linear 0s;  
\}  
.run-enter-active \{  
animation: run-scale 2s linear 0s;  
\}  
// 离开的时候设置成相反哒  
.run-leave-active \{  
animation: run-scale 2s linear 0s reverse;  
\}  
@keyframes run-scale \{  
0% \{  
transform: scale(0);  
\}  
50% \{  
transform: scale(1.3);  
\}  
100% \{  
transform: scale(1);  
\}  
\}  
</style>  
效果

tip : Vue为了知道过渡的完成，内部是在监听transitionend和animationend

如果只使用了其中一个，Vue能自动识别类型和设置监听

但如果同时使用，可能会出现问题：

可能某一个动画执行结束，另外一个动画还没有结束 ( 时间设置的不一样 )  
解决方案

设置type属性为transition和animation来明确指定告知vue监听的类型，以哪个时间为准  
<template>  
<div class="box">  
<button @click="isShow = !isShow">切换</button>  
  
<transition name="run" type="transition || animation">  
<div v-if="isShow">  
<span>123123123123</span>  
</div>  
</transition>  
</div>  
</template>  
题外话 ：其实一般设置一样的时间，而且，有动画了为啥要设置过渡呢，是个神奇的属性～

5、Transition组件的duration属性( 用的比较少 )  
基本设置 : 同时设置进入和离开的时间  
<transition name="run" :duration="1000">  
<div v-if="isShow">  
<span>123123123123</span>  
</div>  
</transition>  
一旦这么使用了，css中设置的 transitionend和animationend的时间就无效了，以duration时间为准

对象设置 : 分别设置进入和离开的时间  
<transition name="run" :duration="\{ enter: 800, leave: 1000 \}">  
<div v-if="isShow">  
<span>123123123123</span>  
</div>  
</transition>  
6、 Transition组件的mode属性  
如果transition组件中包裹的是两个元素( 组件 )，相互显示，就会发生很丑的事情

代码  
<template>  
<div class="box">  
<button @click="isShow = !isShow">切换</button>  
<transition name="run">  
<div v-if="isShow">  
<span>one</span>  
</div>  
<div v-else>  
<span>two</span>  
</div>  
</transition>  
</div>  
</template>  
  
<script>  
export default \{  
data() \{  
return \{  
isShow: true  
\};  
\}  
\};  
</script>  
  
<style lang="scss" scoped>  
.run-enter-active \{  
animation: run-scale 2s linear 0s;  
\}  
// 离开的时候设置成相反哒  
.run-leave-active \{  
animation: run-scale 2s linear 0s reverse;  
\}  
@keyframes run-scale \{  
0% \{  
transform: scale(0);  
\}  
50% \{  
transform: scale(1.3);  
\}  
100% \{  
transform: scale(1);  
\}  
\}  
</style>

效果

缘由和解决  
原因 : 因为默认情况下，进入和离开动画，是同时发生的

解决 : 设置mode属性

<transition name="run" mode="in-out || out-in">  
<div v-if="isShow">  
<span>one</span>  
</div>  
<div v-else>  
<span>two</span>  
</div>  
</transition>  
mode : in-out

mode : out-in

7、 Transition组件的appear属性  
如果想要一刷新页面就展示动画，需加上

<transition name="run" mode="out-in" appear>  
<div v-if="isShow">  
<span>one</span>  
</div>  
<div v-else>  
<span>two</span>  
</div>  
</transition>  
8、 Transition组件的回调函数  
<transition  
@before-enter="beforeEnter"  
@enter="enter"  
@after-enter="afterEnter"  
@enter-cancelled="enterCancelled"  
@before-leave="beforeLeave"  
@leave="leave"  
@after-leave="afterLeave"  
@leave-cancelled="leaveCancelled"  
:css="false"  
>  
<div v-if="isShow">  
<span>one</span>  
</div>  
</transition>  
:css="false". 会让Vue跳过css检测，提高性能，同时防止过渡过程中受css样式的影响

before-enter : 动画进入之前触发 ---- from，初始化操作  
enter : 动画正在进入时触发 ---- active，写js,执行具体的动画  
after-enter : 动画进入之后触发 ---- to，结束，收尾工作  
enter-cancelled : 动画进入失败触发  
before-leave : 动画离开之前触发  
leave : 动画正在离开时触发  
after-leave : 动画离开之后触发  
leave-cancelled : 动画离开失败触发

el : 执行动画的那个元素

done : 当使用javaScript来执行过渡动画时，需要进行done回调，否则它们将会被同步调用，过渡会立刻完成

接下来使用其他封装好的第三方动画库啦～

二、使用animate.css第三方动画库  
Animate.css | A cross-browser library of CSS animations.

1.安装  
npm install animate.css  
2.导入  
在main.js中进行导入

import 'animate.css'  
3.使用  
01-在css中使用  
代码

<template>  
<div class="box">  
<button @click="isShow = !isShow">切换</button>  
<transition name="run" appear>  
<div v-if="isShow">  
<span>one</span>  
</div>  
</transition>  
</div>  
</template>  
  
<script>  
export default \{  
data() \{  
return \{  
isShow: true  
\};  
\}  
\};  
</script>  
  
<style lang="scss" scoped>  
.run-enter-active \{  
animation: lightSpeedInRight 2s linear 0s;  
\}  
.run-leave-active \{  
animation: lightSpeedOutRight 2s linear 0s;  
\}  
</style>  
效果

说明

02-使用class类名  
这里需使用enter-active-class 和 leave-active-class，css部分可以不写啦

代码

可以不用写name了，如果写了class类名，类名的优先级会更高

<template>  
<div class="box">  
<button @click="isShow = !isShow">切换</button>  
<transition enter-active-class="animate\_\_animated animate\_\_backInDown" leave-active-class="animate\_\_animated animate\_\_backOutLeft">  
<div v-if="isShow">  
<span>one</span>  
</div>  
</transition>  
</div>  
</template>  
效果

说明

三、使用gsap库 ( JS库 )  
GreenSock - Docs - Gsap

某些情况下，如果希望通过JavaScript来实现动画效果，那么可以使用gsap库来完成

GSAP : The GreenSock Animation Platform ( GreenSock动画平台 ) 的缩写  
可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且兼容浏览器

1.安装  
npm install gsap  
2.导入  
在组件内部导入即可

import gsap from 'gsap'  
3.使用  
需要使用enter和leave回调函数

<template>  
<div class="box">  
<button @click="isShow = !isShow">切换</button>  
<transition appear @enter="enter" @leave="leave" :css="false">  
<div v-if="isShow">  
<span>one</span>  
</div>  
</transition>  
</div>  
</template>  
<script>  
// 导入  
import gsap from 'gsap'  
export default \{  
data() \{  
return \{  
isShow: true  
\}  
\},  
methods: \{  
enter(el, done) \{  
// 从哪里来  
gsap.from(el, \{  
// 缩小为0  
scale: 0,  
// 透明度  
opacity: 0,  
// 持续时间  
duration: 1,  
// translatex便宜200  
x: 200,  
// 这样设置比较好  
onComplete: done  
\})  
\},  
/\*\*  
\* 这里只需要制定最开始的状态，不用制定后面的状态，有点不好理解  
\*/  
leave(el, done) \{  
// 到哪里去  
gsap.to(el, \{  
scale: 0,  
opacity: 0,  
duration: 1,  
x: -200,  
onComplete: done  
\})  
\}  
\}  
\}  
</script>  
<style lang="scss" scoped></style>  
4.效果

5.gsap额外补充 ( 数字变化效果 )  
代码  
<template>  
<div class="box">  
<input type="number" step="100" v-model="count" />  
<div>  
<span class="text-color">\{ \{ showNumber.toFixed(0) \}\}</span>  
</div>  
</div>  
</template>  
<script>  
import gsap from 'gsap'  
export default \{  
data() \{  
return \{  
count: 0,  
showNumber: 0  
\}  
\},  
watch: \{  
// 监听输入值的改变  
count(newValue) \{  
// 把当前this存进去，实时更改showNumber的值  
gsap.to(this, \{ duration: 0.5, showNumber: newValue \})  
\}  
\}  
\}  
</script>  
<style lang="scss" scoped>  
.box \{  
padding: 200px;  
background-color: skyblue;  
box-shadow: 0 0 100px 0 skyblue;  
input \{  
border: 3px solid rgb(7, 172, 237);  
border-radius: 10px;  
padding: 5px 10px;  
width: 100px;  
background-color: skyblue;  
\}  
.text-color \{  
display: inline-block;  
background-image: linear-gradient(to right, orange, purple);  
background-clip: text;  
color: transparent;  
font-size: 50px;  
\}  
\}  
</style>  
效果

四、列表的过渡 transition-group  
在上面的文章中，过渡动画只是针对单个元素或者单个组件的，如果希望渲染的是一个列表，并且该列表中添加、删除数据也希望有动画执行

使用 transition-group :

1.列表数字增加删除效果  
01-代码  
<template>  
<div class="box">  
<div>  
<button @click="addNum">添加</button>  
<button @click="removeNum">删除</button>  
</div>  
<transition-group tag="p" name="run">  
<span class="item" v-for="item in dataList" :key="item">\{ \{ item \}\}</span>  
</transition-group>  
</div>  
</template>  
<script>  
export default \{  
data() \{  
return \{  
dataList: \[1, 2, 3, 4, 5, 6, 7, 8, 9\],  
defaultNumber: 10  
\}  
\},  
methods: \{  
// 随机位置增加一个数字  
addNum() \{  
this.dataList.splice(this.randomIndex(), 0, this.defaultNumber++)  
\},  
// 随机位置删除一个数字  
removeNum() \{  
this.dataList.splice(this.randomIndex(), 1)  
\},  
// 随机取一个位置  
randomIndex() \{  
return Math.floor(Math.random() \* this.dataList.length)  
\}  
\}  
\}  
</script>  
<style lang="scss" scoped>  
.item \{  
display: inline-block;  
margin-right: 10px;  
display: inline-block;  
background-image: linear-gradient(to right, orange, purple);  
background-clip: text;  
color: transparent;  
font-size: 30px;  
\}  
.run-enter-from,  
.run-leave-to \{  
opacity: 0;  
transform: translateY(50px);  
\}  
.run-enter-active,  
.run-leave-active \{  
transition: all 1s linear 0s;  
\}  
</style>  
效果

02.效果优化  
优化点 : 新增和删除的节点是有动画，但是对于其他需要移动的节点是没有动画的

可以通过新增的v-move的class来完成动画，它会在元素改变位置的过程中应用

css代码

03.增加洗牌效果  
one-安装lodash库

npm install lodash  
two-导入

import \_ from 'lodash'  
three-使用

<template>  
<div class="box">  
<div>  
<button @click="addNum">添加</button>  
<button @click="removeNum">删除</button>  
<button @click="shuffleNum">洗牌</button>  
</div>  
<transition-group tag="p" name="run">  
<span class="item" v-for="item in dataList" :key="item">\{ \{ item \}\}</span>  
</transition-group>  
</div>  
</template>  
<script>  
import \_ from 'lodash'  
export default \{  
data() \{  
return \{  
dataList: \[1, 2, 3, 4, 5, 6, 7, 8, 9\],  
defaultNumber: 10  
\}  
\},  
methods: \{  
// 随机位置增加一个数字  
addNum() \{  
this.dataList.splice(this.randomIndex(), 0, this.defaultNumber++)  
\},  
// 随机位置删除一个数字  
removeNum() \{  
this.dataList.splice(this.randomIndex(), 1)  
\},  
// 洗牌  
shuffleNum() \{  
this.dataList = \_.shuffle(this.dataList)  
\},  
// 随机取一个位置  
randomIndex() \{  
return Math.floor(Math.random() \* this.dataList.length)  
\}  
\}  
\}  
</script>  
<style lang="scss" scoped>  
.item \{  
display: inline-block;  
margin-right: 10px;  
display: inline-block;  
background-image: linear-gradient(to right, orange, purple);  
background-clip: text;  
color: transparent;  
font-size: 30px;  
\}  
.run-enter-from,  
.run-leave-to \{  
opacity: 0;  
transform: translateY(50px);  
\}  
.run-enter-active,  
.run-leave-active \{  
transition: all 1s linear 0s;  
\}  
// 移除的时候需要加上  
.run-leave-active \{  
position: absolute;  
\}  
// 加上这个属性  
.run-move \{  
transition: transform 1s linear 0s;  
\}  
</style>  
fore-效果

2.列表的交替动画效果  
01-用css实现  
代码

<template>  
<div class="box">  
<input type="text" v-model="keyWords" />  
<transition-group tag="ul" name="run" class="nav">  
<li class="item" v-for="item in filterData" :key="item">\{ \{ item \}\}</li>  
</transition-group>  
</div>  
</template>  
  
<script>  
export default \{  
data() \{  
return \{  
keyWords: '',  
dataList: \['abc', 'bac', 'aec', 'qqw', 'qbf', 'aaa', 'afa'\]  
\}  
\},  
computed: \{  
// 赛选一下  
filterData() \{  
return this.dataList.filter((item) => item.includes(this.keyWords))  
\}  
\}  
\}  
</script>  
  
<style lang="scss" scoped>  
.run-enter-from,  
.run-leave-to \{  
opacity: 0;  
transform: translateX(100px) rotate(180deg);  
\}  
.run-enter-active,  
.run-leave-active \{  
transition: all 1s linear 0s;  
\}  
.box \{  
padding: 100px 0;  
background-color: skyblue;  
box-shadow: 0 0 100px 0 skyblue;  
display: flex;  
flex-direction: column;  
justify-content: center;  
align-items: center;  
input \{  
border: 3px solid rgb(7, 172, 237);  
border-radius: 10px;  
padding: 5px 10px;  
width: 100px;  
background-color: skyblue;  
\}  
.text-color \{  
display: inline-block;  
background-image: linear-gradient(to right, orange, purple);  
background-clip: text;  
color: transparent;  
font-size: 50px;  
\}  
\}  
.nav \{  
width: 100%;  
display: flex;  
list-style: none;  
margin: 0;  
padding: 0;  
text-align: center;  
.item \{  
flex: 1;  
\}  
\}  
</style>

效果

ps : 那么是同时消失，同时出现，实现不了交替效果

02-使用js实现动画  
通过delay属性，实现交替效果

代码

<template>  
<div class="box">  
<input type="text" v-model="keyWords" />  
<transition-group tag="ul" name="run" class="nav" @enter="enter" @leave="leave" appear>  
  
<li class="item" v-for="(item, index) in filterData" :data-index="index" :key="item">  
\{ \{ item \}\}  
</li>  
</transition-group>  
</div>  
</template>  
  
<script>  
import gsap from 'gsap'  
export default \{  
data() \{  
return \{  
keyWords: '',  
dataList: \['abc', 'bac', 'aec', 'qqw', 'qbf', 'aaa', 'afa'\],  
// 抽取一下动画参数  
transitionOption: \{  
opacity: 0,  
scale: 0.5,  
height: 0,  
rotate: 360  
\}  
\}  
\},  
computed: \{  
// 赛选一下  
filterData() \{  
return this.dataList.filter((item) => item.includes(this.keyWords))  
\}  
\},  
methods: \{  
enter(el, done) \{  
gsap.from(el, \{  
...this.transitionOption,  
// 设置延迟时间，因为是交替，所以每个都要不一样  
delay: el.dataset.index \* 0.2,  
xPercent: -20,  
onComplete: done  
\})  
\},  
leave(el, done) \{  
gsap.to(el, \{  
...this.transitionOption, // 设置延迟时间，因为是交替，所以每个都要不一样  
delay: el.dataset.index \* 0.2,  
xPercent: 20,  
onComplete: done  
\})  
\}  
\}  
\}  
</script>  
  
<style lang="scss" scoped>  
.box \{  
padding: 100px 0;  
background-color: skyblue;  
box-shadow: 0 0 100px 0 skyblue;  
display: flex;  
flex-direction: column;  
justify-content: center;  
align-items: center;  
input \{  
border: 3px solid rgb(7, 172, 237);  
border-radius: 10px;  
padding: 5px 10px;  
width: 100px;  
background-color: skyblue;  
\}  
.text-color \{  
display: inline-block;  
background-image: linear-gradient(to right, orange, purple);  
background-clip: text;  
color: transparent;  
font-size: 50px;  
\}  
\}  
.nav \{  
width: 100%;  
// display: flex;  
list-style: none;  
margin: 0;  
padding: 0;  
text-align: center;  
position: relative;  
.item \{  
flex: 1;  
\}  
\}  
</style>  
效果

[0cb12bf0dbca404ca939d4e58604e115.png]: https://img-blog.csdnimg.cn/0cb12bf0dbca404ca939d4e58604e115.png
[153b674f86be47bca1d7bf94dfc95e46.png]: https://img-blog.csdnimg.cn/153b674f86be47bca1d7bf94dfc95e46.png