Vue3.x从零开始学-第三季 动画和过渡篇
这是《从零开始学Vue3.x》的第三季教程内容，你学习这篇文章之前，需要对前两集进行基础学习。这里给出地址。
- 从零开始学Vue3.x第一季：基础篇 (23集)
- 从零开始学Vue3.x第二季：组件篇 (13集)
文章都是文字教程和视频教程同步更新的，更新频率大概是每周3-5集。你可以关注公众号，关注后公众号可以提醒和观看视频。另外我还建立了一个QQ群方便大家讨论学习，我每天会固定拿出20分钟左右，去群里解答小伙伴们的问题。重要的是这一切都是免费的。
自己学习可能让你学的够快，但搭伴学习可以让你走的更远。快来一起学习吧
01.[动画]CSS样式中的动画效果
本季第一节，为了不让小伙伴有太大的学习压力，我们先从熟悉的动画效果入手。也就是用CSS的方式写一段动画，当作对以前知识的复习。
动画和过渡的区别
先来看两个概念，有人作了一年前端切图，也没弄明白，CSS中动画和过渡的概念，我在这里给你讲清楚。
动画：一个DOM元素，从一个地方移到另一个地方，这种效果叫做动画。比如一个层从浏览器的左侧移动到右侧，这就是动画。
过渡：是DOM元素中的一个属性，缓慢的变成另一个属性，这种效果叫做过渡效果。比如一个层从红色慢慢变成黄色，这种就是过渡。
在开发中两者经常混合使用，也就是说动画的过程中伴随着过渡，所以很多小伙伴搞不清楚两者的概念。
这节我们先来看一下CSS动画的写法。
准备标准文件和新建演示文件
为了以后方便学习，新建一个文件夹Vue3-3,然后把这个文件夹放入到VSCode当中。再新建一个文件base.html，这个就是我们的基础代码，以后都可以复制这段代码。就好像一个基础的模板一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSPang</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: ` <div>技术胖讲程序</div>`
})
const vm = app.mount("#app")
</script>有了基础代码以后，我们再新建一个文件Demo01.html，把上面的代码复制到这里，然后继续编写。
编写CSS动画效果
现在要作的效果是，一个DIV从左侧，移动到右侧25像素，再移动到50像素，然后再回来，整个动画持续3秒钟。
在VSCode中，创建一个CSS区域，然后编写样式。这时候我们要使用CSS中的animation属性，然后再使用关键帧keyframes指定详细的动画过程。
<style>
.animation {
animation: leftToRight 3s;
}
@keyframes leftToRight {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(25px);
}
50% {
transform: translateX(50px);
}
75% {
transform: translateX(25px);
}
100% {
transform: translateX(0px);
}
}
</style>写完CSS样式，可以在要使用样式的部分加入这个样式，我这里直接加入到Vue模板中的div里。
template: ` <div class="animation">技术胖讲程序</div>`这些写完就可以到浏览器中预览一下效果了。可以看到文字有了动画效果了，其实更准确的说是DOM元素Div有了动画效果。
写一个按钮控制动画效果
动画效果有了，现在提高一下难度，就是写一个按钮，用按钮来控制这个Div的动画效果，按一下有动画，再按一下没有动画。
先来做一个数据项，这个数据项的作用就是控制动画起不起作用。
data() {
return {
isAnimate: {
animation: false
}
}
},有了这个数据项，就可以编写按钮，然后绑定一个方法，控制这个数据项，从而实现动画效果是否使用了。说白了，还是数据驱动开发的理念。
<div><button @click="handleClick">启动/关闭</button></div>现在还缺少对应的方法，methods的业务逻辑很简单，只有一代码，只要对isAnimate取反就可以了。
methods: {
handleClick() {
this.isAnimate.animation = !this.isAnimate.animation
}这时候我们就可以用按钮控制动画是否起作用了。但是注意，到目前位置我们都是以前学的知识，没有涉及到Vue3的动画。就当我们对CSS动画的一个复习。这里给出全部代码，方便你学习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSPang</title>
<style>
.animation {
animation: leftToRight 3s;
}
@keyframes leftToRight {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(25px);
}
50% {
transform: translateX(50px);
}
75% {
transform: translateX(25px);
}
100% {
transform: translateX(0px);
}
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
isAnimate: {
animation: false
}
}
},
methods: {
handleClick() {
this.isAnimate.animation = !this.isAnimate.animation
}
},
template: `
<div :class="isAnimate">技术胖讲程序</div>
<div><button @click="handleClick">启动/关闭</button></div>
`
})
const vm = app.mount("#app")
</script>这节课就到这里，我们下节课继续学习了。
02.[动画]CSS制作过渡效果用Vue进行控制
上节课用CSS制作了动画，然后用Vue的机制来进行控制，这节课我们再来看一下过渡效果的制作和控制。直接开始今天的编码环节。
编写CSS样式 实现基本过渡样式
新建一个文件Demo02.html，复制Base.html文件的基础代码到新文件中。我们先写一段CSS样式代码。
代码中我们先建立了一个transition的样式，这个样式用来执行过渡效果，具体意思是如果背景颜色background-color有变化时，我们要在3秒种完成过渡（变化），并且效果是由慢到快进行的，此部分的关键词是ease。
然后再编写两个样式red和yellow，用来定义背景颜色，颜色分部是红色和黄色。所以就有了下面这些代码。
<style>
.transition {
transition: 3s background-color ease;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
</style>有了这些CSS样式后，CSS样式的代码就基本够用了。接下来我们需要写一些代码，来控制这些CSS过渡效果。
Vue控制过渡效果
要用Vue控制过渡效果，需要先编写一个按钮，然后用按钮实现颜色的变化。这里的按钮提前绑定了点击事件hanldClick。这个事件等我们写完数据项再进行编写。
template: `
<div :class="css" >技术胖讲程序</div>
<button @click="hanldClick">切换颜色</button>
`然后来声明数据项，因为一切都是数据驱动的，所以有数据才能实现控制。
data() {
return {
css: {
transition: true,
red: true,
yellow: false
}
}
},有了数据后，在模板中进行绑定数据。
<div :class="css" >技术胖讲程序</div>绑定成功后，这时候到浏览器预览应该DIV的背景色是红色的。现在点击按钮后，还没有对应的响应事件，所以我们需要编写一个响应事件。
methods: {
hanldClick() {
this.css.red = !this.css.red
this.css.yellow = !this.css.yellow
}
},响应事件名字为hanldClick，然后我们对颜色属性进行取反，就完成了这种过渡效果。现在可以到浏览器中点击按钮，来看一下，最终的效果，这样就实现了过渡的切换。
我们通过两节的学习，讲清楚了动画和过渡的区别，也学习了CSS动画和过渡效果如何用Vue来进行控制。小伙伴们可以练习一下。
03.[动画]Vue3制作动画效果
当我们了解用CSS配合Vue来制作动画和过渡效果后，这节课讲一下如何利用Vue3制作的动画效果。从代码效果上，会比以前的代码有所精简。
制作一个显示隐藏的切换效果
新建一个文件Demo03.html，然后复制Base.html代码到Demo03.html中。有了基础代码后，现在要作的需求就是让模板中的技术胖讲程序这几个字可以用按钮控制显示和隐藏。（其实学到这里，你完全可以暂停视频，自己试着动手作一下。）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo03</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow= !this.isShow
}
},
template: `
`
})
const vm = app.mount("#app")
</script>我们先写了一个按钮，然后按钮绑定hanldClick方法，要控制DOM元素的显示和隐藏，这里使用了v-if。还需要一个数据项，我定义为了isShow，用来控制元素的显示和隐藏。（具体编写过程视频中会有详细讲解）
这步编写完成可以到浏览器中查看一下效果。主要查看一下点击按钮是否可以实现文字的显示和隐藏。如果能正常控制，说明代码没有错误。就可以继续向下学习了。
编写CSS样式和制作进入动画
我们编写动画，同样需要编写CSS样式，并且这些CSS样式有固定的名称，你需要符合这些名称规则来进行编写。
先来写一个关键帧动画, 这个关键帧动画作了从左侧位移到屏幕中的效果，
<style>
@keyframes comein{
0%{
transform:translateX(-100px)
}
100%{
transform:translateX(50px)
}
}
</style>然后需要写一个固定的CSS样式写法v-enter-active意思是进入是采用何种动画方式，我们直接用animation调用这个动画就可以了。
.v-enter-active{
animation: comein 1s;
}现在还是没有动画效果的，你还需要给动画的DOM元素加上<transition>标签。
template: `
<transition>
<div v-if="isShow">技术胖讲程序</div>
</transition>
<div><button @click="hanldClick">切换动画</button></div>
`编写退出动画
现在已经有了元素进入动画，但是退出时还没有退出动画，所以，我们需要制作一个退出动画。过程和上面的方法类似。先编写CSS样式。
@keyframes comeout{
0%{
transform:translateX(50px)
}
100%{
transform:translateX(-100px)
}
}有了comeout的关键帧CSS，然后又是一个固定写法v-leave-active。
.v-leave-active{
animation : comeout 1s;
}这时候你再点击按钮，就有了退出动画。
本节课我们学习了Vue3中的单个元素进入动画效果的制作，下节课我们再学习一下单个元素过渡效果的制作。
04.[动画]Vue3制作过渡效果
有了第三节课的学习，这节课我们在第三节的基础上用Vue的内置组件，制作过渡效果。本节课还是DOM元素的显示和隐藏，但不在是滑入效果，而是慢慢改变透明度opacity。
准备基础文件
新建一个Demo4.html，然后复制Demo3.html代码过来。去掉上节课的关键帧keyframes样式，但保留v-enter-active和v-leave-active。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo04</title>
<style>
.v-enter-active{
}
.v-leave-active{
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow = ! this.isShow
}</script>这时候的代码是没有任何过渡效果的，但是依然可以切换显示与隐藏效果。
增加过渡效果
上节课我们说了v-enter-active和v-leave-active都是固定写法，但是我们需要告诉它执行的过渡效果是什么样子的，这样我们就需要再写两个固定的css样式,v-enter-from和v-enter-to。这两个样式就是控制进入前DOM的样式和进入完成时DOM的样子的。
<style>
.v-enter-from{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
transition: opacity 3s ease-out;
}
</style>这时候到浏览器中预览一下，就有了进入时的透明度过渡效果。但现在隐藏时是没有效果的，我们还需要制作一个隐藏效果。这时候也是两个固定的CSS选择器v-leave-from和v-leave-to，然后再编写离开时的执行效果v-leave-active。
<style>
.v-leave-active{
transition: opacity 3s ease-out;
}
.v-leave-from{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
</style>写完这些 CSS样式，隐藏时就也有了动画效果。目前这段CSS代码还是比较冗余的，我们可以简化一下。简化的原则就是把一样的值的选择器合并到一期，就得到了下面这样的代码。
<style>
.v-enter-from , .v-leave-to{
opacity: 0;
}
.v-enter-to , .v-leave-from{
opacity: 1;
}
.v-enter-active , .v-leave-active{
transition: opacity 3s ease-out;
}
</style>最后预览一下，效果还是可以实现的。这节课我们主要学习了Vue过渡效果的制作。通过两节课 你也可以大概知道Vue动画和过渡效果的套路了，就是利用固定的选择器，然后配合<transition>标签来现实。
05.[动画]第三方动画库Animate使用
这节课一起学习一下，如何在Vue中使用第三方动画库Animate.css。它里边有很多已经写好的动画，可以给开发带来极大的方便。在学习第三方动画库使用前，我们要先学会一个知识，就是自定义Vue中固定的CSS动画选择器。
自定义动画选择
新建一个Demo5.html文件，复制Demo3.html代码到Demo5中。你也可以直接复制下面这段代码。复制好之后，可以在浏览器中查看一下执行的动画效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo05</title>
<style>
@keyframes comein{
0%{
transform :translateX(-120px)
}
100%{
transform :translateX(0px)
}
}
@keyframes comeout{
0%{
transform :translateX(0px)
}
100%{
transform :translateX(-120px)
}
}
.v-enter-active{
animation: comein 1s;
}
.v-leave-active{
animation: comeout 1s;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow = ! this.isShow
}
},
template: `
<transition>
<div v-if="isShow">技术胖讲程序</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
})
const vm = app.mount("#app")
</script>代码中使用了v-enter-active和v-leave-active，这些CSS中固定选择器的类名又臭又长，有没有办法自定义这些选择器的名称那。我这里讲两个方法，你们可以根据需要自行选择。
方法一：给transition标签一个name
这种形式也叫做部分更改，就是通过给<transition>标签一个name属性，然后CSS选择器也要跟着变化。比如先把template中的<transition>标签，加入name='jspang'。
template: `
<transition name="jspang">
<div v-if="isShow">技术胖讲程序</div>
</transition>
`这时候你去浏览器中预览，发现所有的动画已经不能在使用了。那这时候你需要把CSS选择器改为.jspang-enter-active和.jspang-leave-active。此时的CSS代码如下。
.jspang-enter-active{
animation: comein 1s;
}
.jspang-leave-active{
animation: comeout 1s;
}这时候再去浏览器中看效果，动画效果就又恢复到了正常。
正如所说的，他只能修改部分CSS选择器（也就是前半部分），把v-enter-active改为了jspang-enter-active。这个在一个页面中有多个动画时，经常使用。
方法二：自行制定CSS选择名称
这种方法，就是在<transition>标签中直接指定一个CSS样式，在工作中这种方法使用较多，灵活性也比较强。
现在新写一个CSS样式，叫做come和go,代码跟v-enter-active和v-leave-active的CSS代码一样。
.come{
animation: comein 1s;
}
.go{
animation: comeout 1s;
}有了这两端CSS代码后，可以删除上面的v-enter-active和v-leave-active的样式，目的是不混淆，防止小伙伴误会。
然后在template代码中，加入enter-active-class和leave-active-class属性，并指定名称。
template: `
<transition
enter-active-class="come"
leave-active-class="go"
>
<div v-if="isShow">技术胖讲程序</div>
</transition>
`使用自定义名称可以定义一些比较复杂的动画，也可以使用第三方动画库，比如Animate.css动画库。
使用第三方动画库
当我们会了这种自定义方法后，就可以使用Animate.css这样的动画库了。
这里先给出动画库的网址：
直接进入动画库，可以看到在网页的左侧，有很多的动画效果，你可以点击进行预览。
现在你要使用这个动画库，可以直接在HTML页面中引入CDN地址。
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>然后在想有动画的标签加上animate__animated 和任何的动画效果,比如animate__bounce （跳动的动画）。就可以实现一个酷炫的CSS动画效果了。
template: `
<transition
enter-active-class="animate__animated animate__bounce"
leave-active-class="animate__animated animate__bounce"
>
<div v-if="isShow">技术胖讲程序</div>
</transition>
<button @click="hanldClick">切换动画</button>
`此时到浏览器中查看一下效果，这时候的文字就是蹦蹦跳跳的进入和退出页面的。
当然你也可以试试其他效果，比如flash和heartBeat都是非常不错的效果。
这节课我们学习了三个重要的知识点：
- 部分自定义动画CSS样式的方法
- 全部自定义动画CSS样式的方法
- 使用第三方CSS动画库来制作动画
06.[动画]过渡和动画并用小技巧
这节课我们学习一下过渡和动画并用的一些可选择项和注意事项，特别时过渡和动画时长不一致时的处理策略。
构建一个过渡和动画并用的代码
新建一个文件Demo06.html，然后这里复制Demo03.html代码，因为这里面已经有了动画的基本部分。然后从Demo04.html里复制对应的过渡动画效果。
复制后修改CSS样式，最终实现页面既有动画，又有过渡效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo06</title>
<style>
@keyframes comein {
0% {
transform: translateX(-120px)
}
100% {
transform: translateX(0px)
}
}
@keyframes comeout {
0% {
transform: translateX(0px)
}
100% {
transform: translateX(-120px)
}
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-enter-to,
.v-leave-from {
opacity: 1;
}
.v-enter-active {
animation: comein 3s;
transition: opacity 3s ease-out;
}
.v-leave-active {
animation: comeout 3s;
transition: opacity 3s ease-out;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
isShow: false
}
},
methods: {
hanldClick() {
this.isShow = !this.isShow
}
},
template: `
<transition>
<div v-if="isShow">技术胖讲程序</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
})
const vm = app.mount("#app")
</script>为了查看方便，把过渡和动画的时间都变成3秒。然后到浏览器中进行查看，可以看到这时候过渡和动画都非常正常。
过渡和动画时长不一致的处理
有些时候过渡和动画时长并不是一致的，比如过渡时间是7秒，动画时间还是3秒。在进场动画时，你可能还感觉不到Bug，但在出场动画时，就会有严重的问题。动画结束后，为了显示过渡效果，元素又回到了页面上，直到过渡结束，才消失。
为了解决这个问题，可以在<transition>标签上加入type='animation'属性，意思是不管过渡时长是多少，动画结束，整个过程结束。
template: `
<transition type="animation">
<div v-if="isShow">技术胖讲程序</div>
</transition>
<button @click="hanldClick">切换动画</button>
`当然你也可以把动画时间调长为7秒，然后过渡调整为3秒，这时候你可以使用type='transition'，属性，避免Bug。现在的意思就是以过渡时长为准，过渡结束，动画结束。我们来看一下效果。
.v-enter-active {
animation: comein 7s;
transition: opacity 3s ease-out;
}
.v-leave-active {
animation: comeout 7s;
transition: opacity 3s ease-out;
}模板部分修改如下：
template: `
<transition type="transition">
<div v-if="isShow">技术胖讲程序</div>
</transition>
<button @click="hanldClick">切换动画</button>
`这时候过渡结束，动画也随之结束。不过这时候看起来很不自然，因为子还没有走到它应该走的位置，结果动画结束了，就会有跳帧现象。
属性控制动画和过渡时长
还有一种情况，就是我们不管CSS中的动画和过渡时长，以标签为准。可以绑定属性<transition :duration="1000"> 来控制时长，意思是1秒后，结束动画和过渡。注意这里的1000是毫米的意思，也就是1秒。
template: `
<transition :duration="1000">
<div v-if="isShow">技术胖讲程序</div>
</transition>
<button @click="hanldClick">切换动画</button>这时候再到浏览器中查看，可以看到1秒种过渡和动画虽没有完成，但是还是停止了。
duration除了能写一个数字之外，还可以写对象进去，比如入场的时候1秒种，出厂的时候3秒钟，就可以这样写。
<transition :duration="{enter:1000,leave:3000}">这就是动画和过渡同时使用时的一些控制选项和注意事项。下节我们学习一下用JavaScript配合Vue3来制作动画。
07.[动画]JS+Vue3制作动画和钩子函数
有时候我们不使用CSS制作动画，而使用JS来制作动画。虽然CSS的动画比JS的效率要高，但JS在操作DOM和时间控制上有着优势。所以这节我们就来学习一下如何使用JavaScript+Vue3来制作动画。
指定不使用CSS动画
新建一个文件Demo07.html，然后复制Demo3.html的内容进来。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo07</title>
<style>
@keyframes comein{
0%{
transform :translateX(-120px)
}
100%{
transform :translateX(0px)
}
}
@keyframes comeout{
0%{
transform :translateX(0px)
}
100%{
transform :translateX(-120px)
}
}
.v-enter-active{
animation: comein 1s;
}
.v-leave-active{
animation: comeout 1s;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow = ! this.isShow
}
},
template: `
<transition>
<div v-if="isShow">技术胖讲程序</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
})
const vm = app.mount("#app")
</script>如果不使用CSS动画，需要在<transition>标签上加入:css="false"。
<transition :css="false">加上这个绑定属性的意思就是，我不再使用CSS作为动画了。可以到浏览器中看一下，此时的动画效果已经不在起作用。
此时CSS的动画没有用处了，你可以进行删除。
使用JS编写动画效果
Vue为了能让我们使用JS动画效果，为我们提供了一些钩子函数。所谓钩子函数 ，就是在某一时刻会被自动调用的函数。（类似之前我们讲的生命周期函数）
before-enter钩子函数
先来看第一个钩子函数before-enter，在动画开始前执行的函数。我们给这个钩子，绑定一个方法，比如这个方法叫做handleBeforeEnter
<transition
:css="false"
@before-enter="handleBeforeEnter"
>
<div v-if="isShow">技术胖讲程序</div>
</transition>写好钩子函数后，再编写对应的方法handleBeforeEnter.
handleBeforeEnter(element){
element.style.color="red"
},注意，这个方法接收一个参数element,这个参数就是动画的DOM元素，有了它你就可以操作动画了。现在程序的意思是在动画开始前，把字体颜色变为红色。
enter钩子函数
当动画进入时，可以使用钩子函数enter。这里我们作一个如果字体是红色，就变成绿色；如果是绿色就变成红色的效果，并且是半秒钟变化一次。
在template的<transition>标签里加入enter钩子函数。
<transition
:css="false"
@before-enter="handleBeforeEnter"
@enter="handleEnterActive"
>编写钩子函数的业务逻辑。
handleEnterActive(element,done){
setInterval(()=>{
const color=element.style.color;
if(color=='red'){
element.style.color ="green"
}else{
element.style.color="red"
}
},500)
}但现在如何让这个动画停下来那？其实这个还是比较麻烦的。需要先为setInterval指定一个变量animation，然后使用setTimeout在1500毫秒后停止这个动画。
handleEnterActive(element,done){
const animation=setInterval(()=>{
const color=element.style.color;
if(color=='red'){
element.style.color ="green"
}else{
element.style.color="red"
}
},500)
setTimeout(()=>{
clearInterval(animation)
},1500)
}此时在到浏览器中进行预览就可以看到，动画停止了。那我们再来说说done参数的作用，其实done相当于得知动画执行结束后通知执行下一个钩子函数after-enter,如果不通知无法进入下一个钩子函数。
after-enter钩子函数
这个钩子函数是当动画结束时执行的。比如我们想在动画结束后弹出一个alter对象，就可以先写一个after-enter钩子函数，然后利用enter钩子中的done进行通知它动画执行结束。
<transition
:css="false"
@before-enter="handleBeforeEnter"
@enter="handleEnterActive"
@after-enter="handleEnterEnd"
>然后在handleEnterActive的clearInterval后面使用done( )进行通知。
setTimeout(()=>{
clearInterval(animation)
done()
},1500)这时候才会执行handleEnterEnd里边的方法，弹出对话框。
handleEnterEnd(){
alert('JSPang.com')
}这里我们只学了入场动画的钩子函数，当然还有三个出场动画的钩子函数。
- before-leave :离场动画执行之前
- leave：开始执行离场动画
- leave-after: 离场动画执行结束
离场动画我们就不讲了，你可以自己试一下就可以了。
08.[动画]双DOM元素动画的实现
这节课学习的内容是双DOM元素的动画切换，意思就是一个动画<transtion>标签里有两个DOM，然后一个出现时，另一个消失。比如我们在商场的试衣间里，一个人进入，另一个人必须出去。（可以到视频开始的地方查看这种切换效果）
双元素交替切换效果制作
新建一个Demo08.html文件，然后复制Demo03.html的内容。可以先去掉所有的CSS动画效果（在课程中我们要重新进行编写）， 然后在文件中加入一个新的<div>, 修改div里边的文字。再用v-if和v-else控制显示和隐藏。这样就实现了双元素切换的效果。
下面是当前的代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo08</title>
<style>
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow = ! this.isShow
}
},
template: `
`
})
const vm = app.mount("#app")
</script>`这时在浏览器中打开页面，进行预览。可以看到已经有了基本的切换效果，只不过没有动画。
增加动画效果
现在用学过的知识，为这两个<div>增加基本的动画CSS效果。为了方便，我们就写一个透明度过渡就好。实现这个效果，都是我们学过的知识了，你可以跟着写，也可以先不看下面的文章，自己先写写看。练习一下。
你可以先写进入时的过渡样式。
<style>
.v-enter-from{
opacity: 0;
}
.v-enter-to {
opacity: 1;
}
.v-enter-active{
transition: opacity 2s ease-in;
}
</style>有了进场的过多效果，直接加入出场的选择器就可以实现同时拥有入场和出场动画了。
<style>
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-enter-to,
.v-leave-from {
opacity: 1;
}
.v-enter-active,
.v-leave-active {
transition: opacity 2s ease-in;
}
</style>这时再到浏览器中查看效果，虽然都有了动画。但这时候的动画时同时发生的，并不是我们想要的效果。
mode模式讲解
为了解决这个问题，可以在模板中<transition>标签上加入mode属性。mode属性专门用来控制是先显示离场和入场动画的顺序的。比如现在想让离场动画先显示，然后再显示入场动画。就可以使用mode="out-in".
template: `
<transition mode="out-in">
<div v-if="isShow">大脚进入了试衣间</div>
<div v-else>晓红进入了试衣间</div>
</transition>
<button @click="hanldClick">切换动画</button>
`当然你也可以用mode="in-out"先显示入场动画，再显示出场动画。只不过这并不是我们想要的方式。
但这时候还是有一个小问题的，就是刚进入页面时，显示的DOM元素（晓红进入了试衣间）是没有动画效果的。如果想让进入页面，开始就产生动画效果，可以在<transition>标签上加上appear属性就可以实现。
appear属性的意思是初次对某一个元素进行默认显示的时候也进行动画显示。
template: `
<transition mode="out-in" appear>
<div v-if="isShow">大脚进入了试衣间</div>
<div v-else>晓红进入了试衣间</div>
</transition>
<button @click="hanldClick">切换动画</button>
`这时候在浏览器中预览，刚进入页面时也带有了动画效果。讲到这里两个DOM元素直接的动画切换效果你就会使用了。会了两个DOM元素动画切换效果，学习两个组件之间的切换也变的容易了。下一节我们学习一下组件的切换。
09.[动画]双组件切换动画的实现
上节课学习了双DOM元素动画过渡效果的实现，这节课我们把DOM元素换成组件，看看编写方法上有什么变化。
双组件切换动画
新建Demo09.html文件，然后复制上节课的代码，到这个文件中。然后进行改写。
我们先来编写两个组件，这里可以写两个最简单的局部组件。
const DaJiao = {
template: `<div>大脚进入了试衣间</div>`
}
const XiaoHong = {
template: `<div>晓红进入了试衣间</div>`
}要想使用局部组件，需要先用components进行注册,这里换成小写加横线的形式。
components: {
'da-jiao': DaJiao,
'xiao-hong': XiaoHong
},然后修改模板中的<transition>部分，使用局部组件，实现动画。
template: `
<transition mode="out-in" appear>
<da-jiao v-if="isShow" />
<xiao-hong v-else />
</transition>
<button @click="hanldClick">切换动画</button>
`写完这些，到浏览器中查看一下，可以看到动画效果也是可以成功的。
动态组件切换效果
我们还可以使用动态组件的形式进行切换，也就是在业务逻辑层面修改绑定属性，然后在模板中用:is来进行绑定。
先声明一个数据项，叫做component。
data() {
return {
component: 'da-jiao'
}
},然后在handleClick方法里修改这个组件的绑定，这里可以使用一个三元运算符。
methods: {
hanldClick() {
this.component = this.component === 'da-jiao' ? 'xiao-hong' : 'da-jiao'
}
},最后修改模板中的绑定方式。
<transition mode="out-in" appear>
<component :is="component" />
</transition>这时候到浏览器中查看效果，仍然可以得到我们想要的效果。
这里为了方便你学习，我给出所有代码。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo08</title>
<style>
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-enter-to,
.v-leave-from {
opacity: 1;
}
.v-enter-active,
.v-leave-active {
transition: opacity 2s ease-in;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const DaJiao = {
template: `<div>大脚进入了试衣间</div>`
}
const XiaoHong = {
template: `<div>晓红进入了试衣间</div>`
}
const app = Vue.createApp({
data() {
return {
component: 'da-jiao'
}
},
methods: {
hanldClick() {
this.component = this.component === 'da-jiao' ? 'xiao-hong' : 'da-jiao'
}
},
components: {
'da-jiao': DaJiao,
'xiao-hong': XiaoHong
},
template: `
<transition mode="out-in" appear>
<component :is="component" />
</transition>
<button @click="hanldClick">切换动画</button>
`
})
const vm = app.mount("#app")
</script>这节课我们学习了两个组件间切换时的过渡效果制作。希望对你有所帮助，恭喜你又进步了一点，加油。