Vue-router 切換元件頁面時進入進出動畫之1

把頁面跳轉的

<router-view></router-view>
           

包起來

// 用transition 把切換元件頁面的容器包含
    <transition name="slide-fade">
        <router-view></router-view>
    </transition>
           

廢話不多說上代碼

App.vue 代碼

<template>

  <div id="app">
    <Header></Header>
    // 用transition 把切換元件頁面的容器包含
    <transition name="slide-fade">
        <router-view></router-view>
    </transition>

    </div>
</template>

           

切換效果樣式，可以自己寫

<style scoped>
.slide-fade{
  position: absolute;left:0;right: 0;
}
.slide-fade-enter-active {
  transition: all 1.2s ease;
}
.slide-fade-leave-active {

  transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
{
  left:0;right: 0;
  transform: translateX(50px);
  opacity: 0;
}
</style>