本文實(shí)例為大家分享了vue實(shí)現(xiàn)界面滑動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下

1.項(xiàng)目需求

【點(diǎn)擊底部導(dǎo)航欄，切換頁面的時(shí)候，會(huì)有一個(gè)滑動(dòng)的效果】

2.效果圖

1.代碼

Botnav.vue導(dǎo)航欄界面

<template> <div><transition :name='transitionName'> <router-view class='Router'></router-view></transition> <template> <script> export default { data () { return { // 從左往右滑動(dòng) transitionName:’slide-right’, } </script> <style lang='stylus'>.Router position absolute width 100% transition all 0.8s ease .silde-left-enter,.slide-right-leave-activeopacity 0 -webkit-transform translate(100%,0) transform translate(100%,0).silde-left-leave-active,.slide-right-enter opacity 0 -webkit-transform translate(-100%,0) transform translate(-100%,0) </style>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。