Vue3中如何实现过渡动画？组件和动画库方法解析

第Vue3中如何实现过渡动画？组件和动画库方法解析在实际开发中，为了增加用户体验，经常会使用到过渡动画，而过渡动画在CSS中是通过transition和animation实现的。而在Vue中，Vue本身中内置了一些组件和API可以帮助我们方便的实现过渡动画效果；接下来我们就学习一下。

Vue的transition组件

Vue中中提供了transition组件，该组件可以在下列情况之一的情况下，为元素自动添加进入/离开的过渡效果：

使用v-if条件渲染

使用v-show条件展示

动态组件

组件根节点

使用方式也比较简单，需要将需要动画展示的组件或者元素使用transition组件包裹即可，然后定义一组class。

过渡demo

如下代码展示了transition组件的基本用法：

template

button>

代码的运行结果如下图所示：

上面使用的一些class，他们的含义如下所示：

v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效(与此同时v-enter-from被移除)，在过渡/动画完成之后移除。

v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效(与此同时v-leave-from被移除)，在过渡/动画完成之后移除。

下图是Vue文档中的一张图，完美解释了整个流程

class的命名规则

transition组件的class名称并不是必须以v-作为前缀的，其实我们可以自定义前缀，只需要添加一个name属性，例如transitionname=ywz，那么所有的前缀全部变成了ywz-。

使用animation

前面我们使用了transition属性实现了组件进入和离开的过渡效果，现在我们可以使用animation属性实现，示例代码如下：

transition

hello-worldv-if=helloWorldShowmsg=【一碗周】过渡动画演示demo/

/transition

css

/*离开和进入过程中的样式*/

.v-enter-active,

.v-leave-active{

/*添加过渡动画*/

transition:opacity0.5sease;

}

代码运行结果如下：

先看一个问题，当动画在两个元素之间切换的时候，会出现一个问题，复现这个问题的代码如下：

template

button>

运行效果如下：

我们可以看到，在一瞬间两个组件是同时存在的，有的时候我们不需要这种效果，那么我们需要设置transition组件的过渡模式，也就是mode属性，它包含三个值：

default：新元素与当前元素同时进行。

in-out：新元素先进行进入过渡，完成之后当前元素过渡离开。

out-in：当前元素先进行离开过渡，完成之后新元素过渡进入。

了解这个属性之后，我们将代码修改一下，修改后如下：

transitionmode=out-in

hello-worldv-if=showmsg=【一碗周】过渡动画演示demo/

imgv-elsealt=Vuelogosrc=./assets/logo.png/

/transition

现在的运行结果如下：

appear属性

transition组件的appear属性用于开启手册渲染的动画，它接受一个布尔值，示例代码如下：

transitionmode=out-inappear

imgv-if=showalt=Vuelogosrc=./assets/logo.png/

/transition

animate.css库的使用

如