[JavaScript知识库]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>

.custom-appear,
.v-enter,
.v-leave-to {
    opacity: 0;
}

.custom-appear-to,
.v-enter-to,
.v-leave {
    opacity: 1;
}

.custom-appear-active,
.v-enter-active,
.v-leave-active {
    transition: all 5s;
}

new Vue({
    data: function () {
        return {
            show: true
        };
    }
}).$mount('#app');

给初始渲染添加自定义类只需要修改上面的transition，添加一些属性

appear-class：对应enter-class

appear-to-class：对应enter-to-class

appear-active-class：对应enter-active-class

依旧是先添加appear-class(custom-appear)和appear-active-class(custom-appear-active)，在开始过渡的下一帧添加appear-to-class(custom-appear-to)并删除custom-appear，在过渡结束之后删除custom-appear-active和custom-appear-to。因为我的样式写的一样，所以效果和上面一样，但是使用的类名不一样。

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

初始渲染使用JavaScript钩子

css不变，修改transition添加钩子，并在js中定义钩子，只要添加@appear="appearHook"就可以生效了，这里我全部添加了。

<div id="app">
    <button @click="show = !show">toggle</button>
    <transition 
        @before-appear="beforeAppearHook" 
        @appear="appearHook" 
        @after-appear="afterAppearHook" 
        @appear-cancelled="appearCancelledHook"
    >
        <p v-if="show">
            Demo
        </p>
    </transition>
</div>

new Vue({
    data: function () {
        return {
            show: true
        };
    },
    methods: {
        beforeAppearHook: function (el) {
            console.log(el);
            console.log('beforeAppearHook');
            // debugger;
        },
        appearHook: function (el, done) {
            console.log(el);
            console.log('appearHook');
            el.addEventListener('transitionend', () => {
                done();
            });
            // debugger;
        },
        afterAppearHook: function (el) {
            console.log(el);
            console.log('afterAppearHook');
        },
        appearCancelledHook: function (el) {
            console.log(el);
            console.log('appearCancelledHook');
        }
    }
}).$mount('#app');

• before-appear钩子设置标签初始状态,?执行完毕后默认添加v-enter和v-enter-active类名。
• appear钩子会在添加v-enter和v-enter-active类名添加后触发,?在appear钩子函数执行完后添加v-enter-to类名并删除v-enter类名。注意：appear钩子的done()不会自动执行，必须手动监听过渡/动画的结束执行done()，否则v-enter-active和v-enter-to不会被清理

• after-appear钩子是在appear钩子的done()执行之后也就是过渡结束后触发,?此时v-enter-active和v-enter-to类名已经被删除了。

• appear-cancelled钩子只在初次渲染被终止时触发。也就是在初次渲染的时候点击那个button，再次点击就不会再触发了。

JavaScript钩子也可以配合自定义类使用。执行的过程和上面的一样，只不过将默认的v-的类名替换成对应的类名。

<div id="app">
    <button @click="show = !show">toggle</button>
    <transition 
        appear-class="custom-appear"
        appear-to-class="custom-appear-to"
        appear-active-class="custom-appear-active"
        @before-appear="beforeAppearHook" 
        @appear="appearHook" 
        @after-appear="afterAppearHook" 
        @appear-cancelled="appearCancelledHook"
    >
        <p v-if="show">
            Demo
        </p>
    </transition>
</div>

如果对上述过程感觉不太清晰的，可以解开js代码中的debugger注释，查看每一个钩子函数打印的el的变化。当然这里的钩子并没有真的用到，其实完全可以不用那些添加的类样式，直接在钩子函数中使用JavaScript第三方动画库。