接着学习如何使用transition这个标签，帮助我们实现单组件或者单元素的动画效果。
这里面我们之前写的动画或者过渡效果，是在transition里面使用了一个div标签，我们用v-if来控制 div的存在与否， 其实这里我也可以给它改成v-show，这个时候 div的展示和隐藏，实际上它是通过css里面的display-hidden或者display-block来控制的，
虽然你看起来是隐藏的，但是让div标签通过v-show去用它的时候，即便它隐藏的情况下，div标签还是存在的，这是它和v-if的一个区别，
那么我们看如果用v-show这样的语法能不能实现动画效果? 也可以。
我们看到的这种动画效果，除了我可以用v-show来控制标签的展示或者隐藏，还可以用v-if它俩都行，
接着我们继续来讲，我们说 transition上面你可以使用hello来去对class的名字做一些修改，比如说你写了hello之后，你的这些固定的class名字都要以hello开头，你除了使用hello之外，你还可以这么去写，不用这个name等于hello了，你可以自己去定义。
比如说我们可以写enter-from-class，代码示例如下：
我可以自己去定义所有的这种class对应的名字，比如说叫hello-leave-active，
代码示例：
我写一个enter-active-class，也就是在进入入场动画执行的整个过程中，我用的 class的名字叫做hello。
如果你这么写的话，上面你就可以不写这么长的一个样式了，直接写什么就行了，直接写hello就行了，表示入场：
hello-leave-active是出场，我应该改下面这个东西。
出场的动画我们怎么写，我们就写一个bye。
在下面你也要这么去定义:
叫leave-active-class="bye"，
意思就是出场的动画执行的过程中，你用的 class 名字叫做什么？叫做bye。上面你把改成bye就可以了，【第19行】
我可以不按照它写的这种样式去定义 class 的名字：
我可以通过这种enter-active-class="hello"的方式自己去定义入场动画出场动画对应的css class的样子是什么。
有enter-from-class="hello"就会有enter-to-class，
就是你结束的时候你用什么样的class。
leave也是一样的，它会有leave-from-class，
还有一个leave-to-class，也就是出场的动画结束的时候，你会用哪一个class作为它的样式。
这几个语法实际上就是我们自定义动画的class 名字可以通过这种方式进行自定义：
自定义class的名字有什么好处？实际上使用这种自定义的class名字，我们可以去做一些非常复杂的css动画，而且可以使用一些第三方的 css 动画库。
我来给大家举一个例子，我现在打开了一个网站: https://animate.style/
这是一个css的动画效果库，比如说它会告诉我们一些动画效果怎么用，我直接带大家来用就好了。
首先你要用它，你先引入它的 css 样式，我复制一下它的样式代码，用一个cdn上面的样式文件到我的代码里面来:
然后在 meta 标签下面加一个 animate css的样式引用:
怎么去用这个库，它会告诉我们:
如果你想让一个 html 标签有动画效果的话，你可以直接增加一个 animate__animated，告诉ta我现在要有一个动画效果了，具体执行哪一个动画，后面跟一个animate__bounce，意思就是执行一个跳跃的动画，
这么去写你写的元素就会有一个动画效果，那么这个东西怎么在Vue里面做结合？
现在我们不需要自己去写这些样式了，不用自己写这种动画，我们的动画库都引入哪里的动画库，都引入了animate.css对应的动画库，那么我们可以直接这么写:
当用户去让div标签展示或者隐藏的时候，我执行的动画就是什么？【看第32行】，
我们也用一个这种弹性的动画，前面跟一个animate__animated必须要有，指的是我要执行动画，在整个动画的执行过程中它必须得有样式，那么既然在整个动画执行的过程中必须得有样式，我自然就要把它写到哪里去呢？写到enter-active-class="animate__animated animate__bounce"，enter-active-class指的是整个transition这个动画，执行的整个过程中都会有样式，正好就有哪个样式就有 animate__animated的样式，
当然animate__bounce在整个动画执行过程中也需要有，所以我要把它写在animate__animated后面。
同样的在出场动画的时候，我也要有一个弹性的动画，所以这两个样式"animate__animated animate__bounce"我也写在这:
这个时候相当于我们用的这些动画效果实际上不是自己写的，而是直接用的第三方的animate.css这样的一个css 动画库。
animate.css里面其实还提供了很多的动画效果，大家可以读一下它的文档：
比如说他有bounce还有flash，我们可以写一下flash，前面的都不动：
flash会带有闪烁的效果。
transtion:过渡
原文始发于微信公众号（基根奋斗营）：【Vue】使用 transition 标签实现单元素组件的过渡和动画效果（2）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/104385.html
