【vue】CSS动画原理

如果你想让界面的数据有一个动画的效果，就需要在这个数据的外层写一个 transition标签（如果给transition一个名字，则使用名字，如果没有名字使用v代替）

<transition name="fade">
            <div v-if="show">Hello world</div>
</transition>

原理（动画的流程）

1、数据从隐藏状态显示的流程
在动画将要执行的时候，vue会将内部的div上面增加两个class名字，分别为fade-enter和fade-enter-active，vue会在运行的下一帧时候，将fade-enter这class去掉，增加一个fade-enter-to，当走到最后一帧的时候，会将fade-enter-active和fade-enter-to去掉。

2、从显示状态到隐藏状态的流程

例子：

<style>
       .fade-enter,.fade-leave-to{
            opacity: 0;
        }
        .fade-enter-active,.fade-leave-active{
            transit