vue實現頁面跳轉過渡效果

當我們做移動端頁面的頁面跳轉時，不想讓頁面跳轉的那么生硬，所以需要添加過渡效果

html部分（name=“fade” 這是關鍵一步，fade 是自定義class名的一個標識）

<transition name="fade"><keep-alive><router-view></router-view></keep-alive> </transition>

css部分（fade-enter-active 中的 fade 就是上面的name定義的，在這里編輯過渡效果）

.fade-enter-active, .fade-leave-active {transition: all .2s linear; } .fade-enter {transform: translateX(100%);/* opacity: 0; */ } .fade-leave-to {transform: translateX(-100%); }

加入keep-alive是需要設置頁面緩存，
為了返回的時候記錄上一頁狀態，
進出頁面的時候還會觸發activated和deactivated兩個鉤子函數，
真正實現過渡樣式的是transition標簽

總結

以上是生活随笔為你收集整理的vue实现页面跳转过渡效果 transition的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。