快捷導(dǎo)航

Vue進(jìn)階之利用transition標(biāo)簽實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)動(dòng)畫

更新時(shí)間：2023年08月02日 14:42:59 作者：No Silver Bullet

這篇文章主要為大家詳細(xì)介紹了Vue如何利用transition標(biāo)簽實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)動(dòng)畫，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起一下

一、前言

在Vue項(xiàng)目開發(fā)過(guò)程中，應(yīng)用全家桶vue-router實(shí)現(xiàn)路由跳轉(zhuǎn)，且頁(yè)面前進(jìn)、后退跳轉(zhuǎn)過(guò)程中，分別對(duì)應(yīng)不同的切換動(dòng)畫。vue-router 切換頁(yè)面時(shí)怎么設(shè)置過(guò)渡動(dòng)畫？

首先，需要考慮以下問題：

如何判斷切換路由時(shí)是前進(jìn)還是后退？

每次切換時(shí)向左向右切換動(dòng)畫如何實(shí)現(xiàn)？

可通過(guò)以下解決方案實(shí)現(xiàn)：

給各個(gè)頁(yè)面定義層級(jí)，在切換路由時(shí)判斷用戶是進(jìn)入哪一層頁(yè)面。如果用戶進(jìn)入更高層級(jí)路由那么做前進(jìn)動(dòng)畫，如果用戶退到低層級(jí)路由那么做后退動(dòng)畫。

二、方案實(shí)現(xiàn)

// router/index.js
import VueRouter from 'vue-router'
import Home from '../components/home/home'
import User from '../components/user/user'
var router = new VueRouter({
    routes:[{
        name:'test',
        path:'/',
        meta:{index:0},//meta對(duì)象的index用來(lái)定義當(dāng)前路由的層級(jí),由小到大,由低到高
        component:{
            template:'<div>test</div>'
        }
    },{
        name:'home',
        path:'/home',
        meta:{index:1},
        component:Home
    },{
        name:'user',
        path:'/user/:id',
        meta:{index:2},
        component:User
    }]
});

通過(guò)watch監(jiān)聽函數(shù)監(jiān)控路由跳轉(zhuǎn)，判斷切換頁(yè)面之間的層級(jí)關(guān)系，并以此來(lái)判斷路由前進(jìn)或者后退。

<template>
  <div id="app">
    <transition :name="transitionName">   
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
      return {
          transitionName:''
      }
  },
  watch: {//使用watch 監(jiān)聽$router的變化
    $route(to, from) {
      //如果to索引大于from索引,判斷為前進(jìn)狀態(tài),反之則為后退狀態(tài)
      if(to.meta.index > from.meta.index){
	    //設(shè)置動(dòng)畫名稱
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    }
  }
}
</script>
<style>
    // 編寫slide-left 和 slide-right 類的動(dòng)畫
  	.slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
      will-change: transform;
      transition: all 500ms;
      position: absolute;
    }
    .slide-right-enter {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }  
</style>

三、延伸閱讀 transition標(biāo)簽

transition標(biāo)簽是Vue內(nèi)置動(dòng)畫標(biāo)簽，負(fù)責(zé)在插入、更新、移除DOM元素時(shí)，給元素添加樣式

注意：transition標(biāo)簽只能包含一個(gè)元素，且包含的標(biāo)簽需要設(shè)置v-if/v-show控制元素顯示

動(dòng)畫樣式類名

進(jìn)入： .v-enter 始狀態(tài)、 .v-enter-active 進(jìn)入動(dòng)畫、 .v-enter-to 末狀態(tài)

離開：.v-leave 始狀態(tài)、.v-leave-active 離開動(dòng)畫、v-leave-to 末狀態(tài)

進(jìn)入：.v-enter-from 始狀態(tài)、.v-enter-active 進(jìn)入動(dòng)畫、.v-enter-to 末狀態(tài)

離開：.v-leave-from 始狀態(tài)、.v-leave-active 離開動(dòng)畫、.v-leave-to 末狀態(tài)

四、拓展閱讀

《官方文檔》

到此這篇關(guān)于Vue進(jìn)階之利用transition標(biāo)簽實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)動(dòng)畫的文章就介紹到這了,更多相關(guān)Vue transition內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: