下面的代码是点击按钮显示和隐藏你好世界

div id=' root ' div v-if=' show ' hello world/div button @ click=' handleclick ' button/button/div let VM=new vue({ El : ' # root '，data3360 {show: true}，methods : { handleclick()))this . show } })这时候就有需求了，希望在显示和隐藏的时候实现淡入淡出的动画效果。

Div id=' root '过渡名称=' fade ' div v-if=' show ' hello world/div/transition button @ click=' handleClick ' button/div let VM=new vue({ El 3360 ' # root }，data: { show:true }，methods : { handleClick(){ this . show=！This.show} }})如果你想让hello world有动画效果，需要在外面放一层过渡标签，也就是它包裹的东西。有一个动画效果，可以给它起个名字='fade '。

进入

当一个元素被一个转换标签包装时，Vue会自动分析元素的css样式，然后构建一个动画过程

在动画执行的前一刻，Vue会帮我们给dom标签添加两个类，分别是fade-enter和fade-enter-active。

第一帧动画执行后，已经分析了标签过渡，其中有动画效果。当动画运行到第二帧时，Vue将删除dom标签上的v-enter类，并添加一个v-enter-to类。

然后动画会继续执行，在执行结束的那一刻，Vue会做一些事情，将之前添加的v-enter-to和v-enter-active删除。淡入{ opa city 3360 0；}.淡入激活{ transition:不透明度3s；} div id=' root '过渡名称=' fade ' div v-if=' show ' hello world/div/transition button @ click=' handleClick ' button/div let VM=new vue({ El 3360 ' # root }，data: { show:true }，methods : { handleClick(){ this . show=！This.show} }})我们只需要为css中的淡入和淡入活动编写样式。这里需要注意的是，Vue默认以V开头，比如v-enter，过渡可以以名称属性的值开始，比如fade-enter。

这里的两个类是指：淡入和淡入激活在动画执行之前就存在了。当动画的第一帧运行时，淡入将被删除，css效果opacity: 0将变成opacity: 1，直到执行淡入激活时才会被删除。在此期间，需要3秒钟来监控不透明度和过渡。

离开

隐藏动画过程：

在隐藏的第一瞬间，Vue会给dom添加两个类，即v-leave和v-leave-active

运行到第二帧，Vue将删除v-leave并添加一个v-leave-to

然后动画会继续执行，在执行结束的那一刻，Vue会删除之前添加的v-leave-to和v-leave-active。淡入淡出到{ opa city 3360 0；}.淡入淡出活跃{ transition:不透明度3s；} div id=' root '过渡名称=' fade ' div v-if=' show ' hello world/div/transition button @ click=' handleClick ' button/div let VM=new vue({ El 3360 ' # root }，data: { show:true }，methods : { handleClick(){ this . show=！This.show} }})为什么会出现这两个css动画效果？

淡入淡出类存在于动画执行的第一个时刻到动画执行结束。也就是在动画运行过程中，我会一直监控div的不透明度，一旦不透明度发生变化，我会让它在3s内执行。

第一瞬间，淡入淡出不透明度为1，为显示状态；在第二个时刻，不透明度为0。这时候就需要增加一个渐变-离开-到类，而渐变-离开-激活一直在监控不透明度的变化。一旦不透明度改变，它将在3秒内完成。

自定义类

如果我不想使用Vue提供的六个类，我想定制一个类。如何才能做到这一点？主动的。离开{ transition:不透明度3s；}Vue为我们提供了自定义属性的方法，可以使用enter-active-class自定义一个enter类；使用休假活动类别来自定义休假类别。

过渡名称=' fade ' enter-active-class=' active ' leave-active-class=' leave ' div v-if=' show ' hello world/div/transition使用此功能，当您需要在项目中使用复杂的css样式时，可以引入第三方css样式库。这是一个动画. css库

使用第三方库(animate.css)时，有两件事需要注意：

必须有一个动画类转场名称=' fade' enter-active-class='动画swing' leave-active-class='动画shake ' div v-if=' sh Ow ' hello world/div/transition，动画效果只会在点击按钮时出现，但此时如果你想一进入就实现动画效果，怎么实现呢？

转场名称='淡化'出现//添加视在属性enter-active-class='动画摇摆' leave-active-class='动画摇动'视在-active-class='动画摇摆'/您可以通过使用自定义属性“出现-活动-class”来实现div v-if=' show ' hello world/div/转场。如果需要一进入就有动画，需要使用两个自定义属性：“出现”和“出现-活动-类”。请参见上面的代码。

过渡和动画同时使用

当过渡和动画同时使用时，谁来决定动画时长？

Vue提供手动设置，参见以下代码

过渡名称=“渐变”类型=“过渡”//动画持续时间可以根据过渡手动设置。视在输入-活动-类=“动画摇摆”离开-活动-类=“动画摇动”视在-活动-类=“动画摇摆”div-if=“显示”hello world/div/transition在transition标记中，可以使用type属性。其目的是如果同时存在过渡和动画，则将类型设置为过渡，这将基于过渡的动画持续时间。

回到代码，现在你需要自己定义动画时长。如何实现？

过渡名称='渐变' :持续时间='10000' /总动画持续时间为10s。enter-active-class='动画摇摆' leave-active-class='动画摇动'出现-active-class='动画摇摆' div v-if=' show ' hello world/div/trans vue提供了持续时间的属性，并且可以自定义动画持续时间。

这个自定义动画持续时间也可以设置得更复杂：

转场名称='淡出' :时长=' {输入：5000，离开：10000}' //输入动画时长和离开动画时长可以单独设置。enter-active-class='动画摇摆' leave-active-class='动画摇动'出现-active-class='动画摇摆' div v-if=' show ' hello world/div/transition最后

在过渡标签中，不仅v-if可以控制显示隐藏，v-show也可以控制显示隐藏，甚至是动态组件。只要动画中的标签在转场时发生变化，就会有转场效果

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。