vue實現介面滑動效果
阿新 • • 發佈:2021-07-19
本文例項為大家分享了實現介面滑動效果的具體程式碼,供大家參考,具體內容如下
專案需求+效果圖
1.專案需求
【點選底部導航欄,切換頁面的時候,會有一個滑動的效果】
2.效果圖
程式碼+關鍵程式碼解析
1.程式碼
Botnav.vue導航欄介面
<template> <div> <transition :name="transitionName"> http://www.cppcns.com <router-view class="Router"></router-view> </transition> <template> <script> export default { dahttp://www.cppcns.comta () { 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) tranZMEQmwhSsform translate(100%,0) .silde-left-leave-active,.slide-right-enter opacity 0 -webkit-transform translate(-100%,0) transform translate(-100%,0) </style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。