vue實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)過(guò)渡效果

當(dāng)我們做移動(dòng)端頁(yè)面的頁(yè)面跳轉(zhuǎn)時(shí)，不想讓頁(yè)面跳轉(zhuǎn)的那么生硬，所以需要添加過(guò)渡效果

html部分（name=“fade” 這是關(guān)鍵一步，fade 是自定義class名的一個(gè)標(biāo)識(shí)）

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

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

.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是需要設(shè)置頁(yè)面緩存，
為了返回的時(shí)候記錄上一頁(yè)狀態(tài)，
進(jìn)出頁(yè)面的時(shí)候還會(huì)觸發(fā)activated和deactivated兩個(gè)鉤子函數(shù)，
真正實(shí)現(xiàn)過(guò)渡樣式的是transition標(biāo)簽

總結(jié)

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

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