Vue.js過渡模式不起作用？

我目前工作的一個滑塊組件，但似乎我的過渡模式是行不通的。我已經使用：Vue.js過渡模式不起作用？

<transition name="fade" mode="out-in">

據我所知這應該迫使元素走出去首先完成它在所呈現的元素之前整個動畫。

這是我的滑蓋組件的例子：

https://www.webpackbin.com/bins/-KfMMcLvpUA6LGOFL3vM

我可以通過疊加圖像絕對解決它，但認爲顯然不是我想做的事情時，有可能是一個整潔的解決方案的東西。

過渡CSS被包含在索引頁的標題：

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

我有它了一樣容易使用越好，如果有人可以看看，這將是真棒。

來源

2017-03-16 Stephan-v

你的理解是一個過渡將在另一個之前開始完成是錯誤的。如果你是一個transition標籤中變幻出一個元素，它可能是真實的，但是當每個元素被包裹在自己的transition標籤是不正確的。

您可以做的最簡單的事情是使用setTimeout來分配下一個activeSlide等待轉換。

methods: { 
     prevSlide() { 
      const nextSlide = this.activeSlide === this.firstSlide ? this.lastSlide : this.activeSlide - 1; 
      this.activeSlide = null; 
      setTimeout(() => { 
       this.activeSlide = nextSlide; 
      }, 500); 
     }, 
     nextSlide() { 
      const nextSlide = this.activeSlide === this.lastSlide ? this.firstSlide : this.activeSlide + 1; 
      this.activeSlide = null; 
      setTimeout(() => { 
       this.activeSlide = nextSlide; 
      }, 500); 
     } 
    }

這要求您的超時值和CSS過渡時間保持同步。

有點更多的工作是使用transition hooks當離開過渡開始和結束髮射活動。

<transition name="fade" mode="out-in" @leave="transitionStarted" @after-leave="transitionComplete">

你會趕上他們在頂級代碼，（不是滑塊，因爲片事件不會傳播到插槽容器）

<slide src="http://lorempixel.com/196/196" alt="" @transition-started="holdUp" @transition-complete="okGo"></slide>

在處理程序（holdUp和okGo）你可以設置一個布爾數據項，你可以將它作爲道具傳給slider。在slider，nextSlide和prevSlide將計算activeSlide下一個值是什麼，但不會設置。當道具指示過渡完成時它會被設置。

來源

2017-03-16 17:40:17

Vue.js過渡模式不起作用？

回答

相關問題