Vue appear属性的用法

Vue 可以通过 appear 属性设置节点在初始渲染的过渡效果：

<transition appear>
    <!-- ... -->
</transition>

这里默认和进入/离开过渡效果一样，同样也可以自定义 CSS 类名。

<transition
    appear
    appear-class="custom-appear-class"
    appear-to-class="custom-appear-to-class"
    appear-active-class="custom-appear-active-class"
>
<!-- ... -->
</transition>

【实例】appear属性。

<style>
    .custom-appear{
        font-size: 50px;
        color: #c65ee2;
        background: #3d9de2;
    }
    .custom-appear-to{
        color: #e26346;
        background: #488913;
    }
    .custom-appear-active{
        color: red;
        background: #CEFFCE;
        transition: all 3s ease;
    }
</style>
<div id="app">
    <transition
            appear
            appear-class="custom-appear"
            appear-to-class="custom-appear-to"
            appear-active-class="custom-appear-active"
    >
        <p>野火烧冈草，断烟生石松。</p>
    </transition>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({  }).mount('#app');
</script>

在 Chrome 浏览器中运行程序，页面一加载就会执行初始渲染的过渡样式，效果如下图所示。


最后恢复原来的效果，如下图所示。


还可以自定义 JavaScript 钩子函数：

<transition
    appear
    v-on:before-appear="customBeforeAppearHook"
    v-on:appear="customAppearHook"
    v-on:after-appear="customAfterAppearHook"
    v-on:appear-cancelled="customAppearCancelledHook"
>
    <!-- ... -->
</transition>

在上面的例子中，无论是 appear 属性还是 v-on:appear 钩子，都会生成初始渲染过渡。