Nuxt.js - 每條路線都有不同的過渡

Question

我目前正在使用 Nuxt.js，這太棒了！ 我為我創建的每個頁面做了一些轉換。 但是，當您從存檔轉到頁面時，我想調用特定的轉換。 例如：

在存檔中，您有兩個 a href，每個 a href 都轉到另一個頁面。 因此，您有不同的路線，例如：存檔->第1頁和存檔->第2頁。我想在存檔離開第1頁和第2頁時為存檔進行過渡。我需要為每條路線調用特定的過渡. 但是我在文檔中找不到任何東西是如何工作的。 有人有想法或例子嗎？

Answer 1

我認為你在正確的軌道上。

本質上，您只想將轉換鍵作為函數調用。 將“發件人”視為存檔頁面，將“收件人”視為下一頁。 你可以這樣做：

transition (to, from) {
  if (to.path === '/page-1'){
      return 'transition-one' 
  } else if (to.path === '/page-2') {
      return 'transition-two'
  }
}

或者在偽代碼中......

// If the 'to' path is the same as /path-1
    // Do the transition with the name 'transition-one'
// Otherwise, if the 'to' path is the same as /path-2
    // Do the transition with the name 'transition-two'.

你可以把這個轉換函數放在你的模塊導出中，就像你的生命周期鈎子一樣。 這有點幫助嗎？

Answer 2

如果你使用布局，在<nuxt/>之間插入<transition>就足夠了。 請參考vue官方文檔

模板

 <v-content>
  <transition name="fade">
    <nuxt />
  </transition>
</v-content>

css

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;