Vue初始渲染的过渡

深藏阁楼爱情的钟 2022-10-19 05:33 122阅读 0赞

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

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

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

当页面加载的时候会添加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第三方动画库。

如果有兴趣的话大家可以看一下MDN[requestAnimationFrame][]、[Web\_Animations\_API][Web_Animations_API]以及[FLIP中的Got Code][FLIP_Got Code]

[requestAnimationFrame]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
[Web_Animations_API]: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API
[FLIP_Got Code]: https://aerotwist.com/blog/flip-your-animations/

Vue初始渲染的过渡

发表评论取消回复

还没有评论，来说两句吧...

相关阅读