Vue中同时使用动画和过渡

之前写的两篇介绍动画和过渡的文章，一篇说的是使用动画，一篇说的是使用过渡效果，本文写一下初始渲染的过渡效果以及同时使用动画和过渡的效果：

初始渲染的过渡

一般情况下，我们默认打开页面的时候是没有过渡效果的，只有当点击了按钮才会触发进入/离开的动画和过渡效果，现在我们使用appear特性就可以设置初始渲染的过渡效果代码：

只需要在transition属性中添加appear和appear-active-class的指定样式。

appear同样也可以自定义 CSS 类名。

没使用appear的效果：点我查看

使用appear的效果：点我查看

同时使用动画和过渡

因为我们使用了animate.css库， animate.css库是一个动画的效果，所以我们再加入过渡效果就可以了，具体做法：

在transition属性中添加过渡效果的css样式，fade-enter-active和fade-leave-active即可：

时间问题

有时候动画的时长和过渡的时长不一致，那么我们要以哪个时长为准呢？我们上面的代码设置过渡的时长为3s，然后我们打开animate.css库的源码，发现里面显示swing的动画效果时长为1s

如果animation很快的被触发并完成了，而 transition 效果还没结束，在这种情况中，我们可以使用 type 特性并设置type值为 animation 或 transition 来明确声明需要 vue 监听的类型，这样可以告诉vue动画/过渡完成的时间。

因为3s>1s，所以时长以过渡的时长为主。

代码：

我们只需要设置type值为transition即可，意思就是以transition的时长为结束时间。

duration

我们现在是靠type值为transition或者animation来设置动画的总时长，那么可以自定义时长为多少吗？可以的，只需要使用transition 组件上的 duration属性定制一个显性的过渡持续时间 (以毫秒计)：

"10000"表示过渡持续时间为10s

除了这种写法，我们也可以定制进入和移出的持续时间：

enter表示进场，leave表示离场，值分别为5s和1s