vue實現(xiàn)界面滑動效果
更新時間：2021年07月16日 15:16:13 作者：Stephanie翟
這篇文章主要為大家詳細介紹了vue實現(xiàn)界面滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)界面滑動效果的具體代碼，供大家參考，具體內(nèi)容如下
項目需求+效果圖
1.項目需求
【點擊底部導航欄，切換頁面的時候，會有一個滑動的效果】
2.效果圖
代碼+關鍵代碼解析
1.代碼
Botnav.vue導航欄界面
<template>
<div>
<transition :name="transitionName">
<router-view class="Router"></router-view>
</transition>
<template>
<script>
export default {
data () {
return {
// 從左往右滑動
transitionName:'slide-right',
}
</script>
<style lang="stylus">
.Router
position absolute
width 100%
transition all 0.8s ease
.silde-left-enter,.slide-right-leave-active
opacity 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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue3中通過遍歷傳入組件名稱動態(tài)創(chuàng)建多個component 組件
這篇文章主要介紹了vue3中通過遍歷傳入組件名稱動態(tài)創(chuàng)建多個component 組件,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vuex是一個專門為vue開發(fā)的狀態(tài)管理工具,它采用集中式存儲管理應用的所有組件的狀態(tài),其核心是state,下面這篇文章主要給大家介紹了關于Vuex的安裝、搭建及案例的相關資料,需要的朋友可以參考下2022-05-05
Vue3公布曾經(jīng)有一段時間了,它采納了新的響應式零碎,而且構建了一套全新的 Composition API,下面這篇文章主要給大家介紹了關于Vue3新狀態(tài)管理工具的相關資料,需要的朋友可以參考下2022-03-03
本篇文章主要介紹了VUE元素的隱藏和顯示（v-show指令)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細介紹了Vue的生命周期，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家詳細介紹了Vue中常見的生命周期鉤子函數(shù)的使用,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-11-11
vue elementUI實現(xiàn)自定義正則規(guī)則驗證
本文主要介紹了vue elementUI實現(xiàn)自定義正則規(guī)則驗證，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
系統(tǒng)頂部展示一個橫向滾動的消息通知,就是消息內(nèi)容從右往左一直滾動,這篇文章主要介紹了vue頂部消息橫向滾動通知,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue項目配置使用flow類型檢查的步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了用vue構建多頁面應用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09