vue頁面切換過渡transition效果

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:06:34

vue頁面切換過渡transition效果

vue頁面切換過渡transition效果:首先得有你想要的過渡效果css代碼： .vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active { will-change: transform; transition: all 500ms

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀vue頁面切換過渡transition效果:首先得有你想要的過渡效果css代碼： .vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active { will-change: transform; transition: all 500ms

首先得有你想要的過渡效果css代碼：

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
 will-change: transform;
 transition: all 500ms;
 height: 100%;
 position: absolute;
 backface-visibility: hidden;
 perspective: 1000;
}
.vux-pop-out-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}

給你想要過渡頁面的父元素給上這樣的樣式：

.router-view{
 width: 100%;
 position: absolute;
 -webkit-transition: all .3s cubic-bezier(.55,0,.1,1);
 -moz-transition: all .3s cubic-bezier(.55,0,.1,1);
 -ms-transition: all .3s cubic-bezier(.55,0,.1,1);
 -o-transition: all .3s cubic-bezier(.55,0,.1,1);
 transition: all .3s cubic-bezier(.55,0,.1,1);
 height:100%;
 }

html代碼是這樣的：

<template>
 <div id="app">
 <transition :name="transitionName"> 
 <router-view class="router-view"></router-view>
 </transition>
 </div>
</template>

js代碼是這樣的：

export default {
 name: 'app',
 data(){
 return {
 transitionName:'vux-pop-in'
 }
 },
 }

這里的transitionName根據(jù)自己的需要去改變，我是監(jiān)聽路由去改變是vux-pop-in還是vux-pop-out的。

watch:{
 $route(to, from) {
 if(to.meta.index > from.meta.index){
 this.transitionName = 'vux-pop-in';
 }else{
 this.transitionName = 'vux-pop-out';
 }
 }
 }

這里當(dāng)然要個路由這是參數(shù)index，分級。

總結(jié)

以上所述是小編給大家介紹的vue頁面切換過渡transition效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com