【Vue11】使用Animate.css

上一章是说如何使用transition这种过度动画，这一章是说如何使用keyframe这种动画。

我是动画

keyframes定义动画，然后在 show=true的时候正向执行，在 show=false的时候反转运行一次。

我是具体呈现效果

如果我想自定义名称呢？比如下面这样：

效果是一样的

这样就可以配合 Animate.css库来使用，官网在这 我是Animate.css官网
官网提供了很多动画，不用我们自己写，怎么用呢？
1.将 Animate.css下载下来（这一步可以不用操作，通过cdn引用）。
2.通过 在 部分 引入
3.在入场动画和出场动画先写 animated，然后再写上想要的动画效果名。
如下图：

引入图

效果图如下：

我是效果图

---

同时使用过渡和动画和初始渲染

当我们刷新页面，第一次显示的时候，动画效果并没有。只有点击按钮的时候，才会出现动画效果，如果想让第一次显示的时候就有动画效果，应该怎么做呢？

这样做

在 transition上添加一个 appear，同时也要添加 appear-active-class， appear-active-class里的动画名字，随意添加。（这个叫做初始渲染的动画）， appea-active-class里也可以写的是过渡效果。

如果这样写

如果如上图缩写，那就是 keyframe动画和过渡动画同时使用。但是两者时间好像不太匹配，过渡动画上写的是 3s，在 Animate里的动画时间是 1s。

Animate里的动画持续时间为1s

两者不一样啊，整个动画效果怎么算呢？到底是1s还是3s，这个时候我们可以手动去设置时间。在transition里加上type，

像这样

type="transition"，意思就是我这里的动画啊，既有 keyframe动画，也有 transition的动画，我的动画时长以 transition的为主。（ type的值为 animation或 transition）

自己定义时间

自己定义时间

这里表示整个动画持续时间为 10s， 10000毫秒就是 10s，
还能自定义入场和出场的动画持续时间：

入场时间5s，出场时间10s