transtion內置組件
Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡
- 條件渲染 (使用 v-if)
- 條件展示 (使用 v-show)
- 動態組件
- 組件根節點
<transition :name="animation">
//里面可以放置組件
</transition>
簡單來說，就是transtion組件所包裹的內容，在執行創建銷毀，消失出現，動態切換的場景時，會被添加上過渡效果
過渡效果的不同時期
簡單的轉場影片
實作思路：
頁面切換的程序，其實就是老頁面銷毀 (隱藏) 到新頁面創建 (顯示) 的程序，我們給這個程序加上過渡效果，增加一個左右平移的影片，是頁面更加生動形象！
大概效果：
當前頁面跳轉到其他頁面，頁面會整體水平向左向右偏移；
實作步驟
1. 給路由容器router-view包裹上transtion組件，使其在切換的時候會加載過渡效果
//name指定過渡所執行的影片，動態系結是為了切換不同的轉場影片
<transition :name="animation">
//router-view加上絕對定位效果，默認居于左上角
<router-view class="router"></router-view>
</transition>
<style>
.router {
position: absolute;
left: 0;
top: 0;
}
</style>
2. 設計影片的過渡效果
//左滑影片和右滑影片
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition: all 0.8s ease;
position: absolute;
}
.slide-left-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-left-leave-to {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-right-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-right-leave-to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
3. 給不同的頁面設定層級，作為左滑右滑的判斷
const routes = [
{
path: "/",
name: "Home",
component: Home,
children: [
{
path: "/",
//index代表當前頁面層級
meta: { index: 1 },
component: () => import("../views/index/index.vue"),
},
{
path: "/my",
meta: { index: 1 },
component: () => import("../views/my/my.vue"),
},
],
},
//跳轉詳情
{
path: "/classDetail",
meta: { title: "課程詳情", index: 2 },
component: () => import("../views/class/classDetail.vue"),
},
//老師詳情
{
path: "/teacherDetail",
meta: { title: "講師詳情", index: 2 },
component: () => import("../views/index/child/Details.vue"),
}
]
4. 監聽路由資訊，根據要跳轉的頁面層級和當前的頁面層級，來決定執行左滑效果還是右滑效果；一般來說，進入頁面為右滑，離開為左滑
watch: {
$route (to, from) {
if (to.meta.index > from.meta.index) {
//設定影片名稱
this.animate = 'slide-left';
} else {
this.animate = 'slide-right';
}
}
},
data () {
return {
animate: ''
}
},
小細節：
取消影片效果產生的系統滾動條
html{
overflow: hidden;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/248522.html
標籤：其他
下一篇：APICloud的發展和應用