Vue.js 轉換不適用於頁面首次加載

Question

我有一個帶有可在兩個組件之間切換的鏈接的導航欄。
我有一個用於切換的淡入動畫，但是當您第一次打開頁面時它不會運行（它僅在您使用導航欄鏈接切換組件時運行）。
有什么辦法可以克服這個問題嗎？

PS 組件只是<h1>Home</h1>和<h1>About</h1> 。

HTML：

<div id="app">
  <transition name="view">
      <router-view/>
  </transition>
</div>

JS（路由器）：

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: { name: 'home-route' }
    },
    {
      path: '/home',
      name: 'home-route',
      component: HomeComponent
    },
    {
      path: '/about',
      name: 'about-route',
      component: AboutComponent
    }
  ]
})

CSS（動畫）：

.view-leave-active {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
}

.view-enter-active {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
    transition-delay: 0.5s;
}

.view-enter, .view-leave-to {
    opacity: 0;
}

.view-enter-to, .view-leave {
    opacity: 1;
}

Answer 1

只需在轉換包裝器中添加“出現”屬性。
你將需要你的 css 類來制作動畫或過渡到。
例子：

<transition name="fade" appear></transition>

Answer 2

視圖轉換不會在頁面加載時自動工作，因為加載內容時它們尚未初始化。

您必須找到另一種觸發過渡的方法。 我能想到幾個選項。

1. 默認情況下使用數據屬性隱藏組件，然后在已mounted生命周期中將其切換為 true。 這應該會觸發轉換。

<div v-if="show"></div>

data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = true; // might need this.$nextTick
  }

2. 使用常規的 css 過渡。

和上面的做法類似，給父元素一個帶樣式的類

opacity: 0;
transition: opacity 0.5s ease-in-out;

然后在mount添加一個類以將不透明度更改為 1。