vueJS中v-for的轉換

我無法用vueJ中v-for顯示的圖像實現淡入淡出。我想使用next/prev按鈕來顯示圖像。vueJS中v-for的轉換

我的文檔閱讀：

Vue公司提供了一個過渡的包裝組件，允許您添加進入/離開轉換爲以下上下文中的任何元素或組分：

條件渲染（使用v-if）

有條件顯示（使用v-show）

個
動態組件

組件根節點

所以我安排我的代碼有一個V型，如果在我的v型的。

下面的一段代碼：

<transition name="fade"> 
    <img id='pvw' v-for='day in days' :src='day.preview' v-if='day.current' title='Preview' /> 
</transition>

和CSS的一點點：

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

Here是小提琴，看什麼，我試圖做的。

請幫我實現這一點，不知道爲什麼它不起作用。

來源

2017-01-03 chles

您必須使用TRANSITION GROUP，而不是TRANSITION。

我會建議使用類似於：https://github.com/asika32764/vue2-animate 這是一個很棒的包，它允許您在Vue應用程序中使用AnimateCSS中的CSS動畫。

例如，在你的情況，你會使用類似的東西：

<transition-group name="fadeLeft" tag="div" :src='day.preview' v-if='day.current' title='Preview'> 
    <img v-for="day in days" v-bind:key="day"> 
</transition-group>

來源

2017-01-03 13:30:41

THX，我更新我做了什麼和它的作品，但發現有圖像的屬性放置img元素，而不是。我已經使用過渡組，但我忘記了：看起來很重要的關鍵。 Thx爲您的快速答案！ – chles

你做v-if="day.current"所以我懷疑是有史以來要去false足夠長的Vue公司承認它做過渡。如果你只是添加:key="day.preview"到你的圖片標籤，你會很好去。

https://jsfiddle.net/hfp78gfe/1/

來源

2017-01-03 13:36:32

'：key =「day」'是比較誠實的好方法 –

爲什麼？當「天」發生什麼變化時，這不會引發過渡嗎？帶代碼的 –

幾乎總是更好。 –

vueJS中v-for的轉換

回答

相關問題