Vue初始渲染的过渡

初始渲染就是在页面刚出现或者刷新的时候实现一些过渡效果，而且默认状态肯定不能是隐藏的，否则无法使用初始渲染。

若要使用初始渲染，必须给transition添加 appear attribute或者v-on:appear 钩子

<transition appear>
...
</transition>

<transition v-on:appear="customAppearHook">
...
</transition>

初始渲染默认和进入过渡一样。

当页面加载的时候会添加v-enter和v-enter-active的类名，在开始过渡效果的下一帧添加v-enter-to类名，并删除v-enter类名，过渡结束后会删除v-enter-active和v-enter-to类名。按如下配置好之后，页面的元素在加载的时候就会产生过渡效果，如果没有appear属性，那么加载的时候是不会初始渲染的。

<div id="app">
    <button @click="show = !show">toggle</button>
    <transition appear>
        <p v-if="show">
            Demo
        </p>
    </transition>
</div>