VueJSでのv-forでの遷移

VueJSでv-forで表示された画像では、フェードインのフェードアウトを達成できません。次/前ボタンを使って画像で画像を表示したい。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アニメーションを使用するのに最適なパッケージです。私はVueのは、移行を行うには、それを認識することは、これまで十分にfalse長くなるだろう疑う

<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