主要實現(xiàn)的是頁面跳轉(zhuǎn)的時候一個頁面從左邊出去，一個頁面從右邊進來，通過css3實現(xiàn)的，可以自己自行修改

html代碼

<template><div id="app"><div class="router-parent"><transition :name="transitionName" mode="out-in"><router-view class="home-router"></router-view></transition></div></div> </template>

js代碼

export default {name: 'app',data () {return {transitionName: 'slide-right'}},components:{},computed: {} }

css代碼

.router-parent{position: relative;width: 100%;height: 100%; } .home-router {position: absolute;width: 100%;height: 100%;transition: all .5s ease; } .slide-left-enter,.slide-right-leave-active {opacity: 0;-webkit-transform: translate(-100%, 0);transform: translate(-100%, 0); }.slide-left-leave-active, .slide-right-enter {opacity: 0;-webkit-transform: translate(-100%, 0);transform: translate(-100% 0); }

總結(jié)

以上是生活随笔為你收集整理的vue的transition组件的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。