Vue.js transition 動きをv-forで回したリスト内の要素で変えたい

###前提・実現したいこと
Vue.js 2.1.10

以下の章で示すソースコード3行目のv-forで回した配列の中身をみて、transitionの動きを切り替えたい
例：
item.move == rightの場合

javascript
1.slide-enter{
2    opacity: 0;
3    transform: translateX(-30px);
4}

item.move == rightの場合

javascript
1.slide-enter{
2    opacity: 0;
3    transform: translateX(30px);
4}

ソースコード

Animation.vue

javascript
1<div class="display-message">
2    <transition-group name="slide">
3        <div
4            v-for="item in items"
5            v-if="item.display"
6            class="message-content slide-item"
7            :id="item.id"
8            :key="item.id">
9            <div class="row">
10                // コンテンツ
11            </div>
12        </div>
13    </transition-group>
14</div>
15
16/* transition */
17.slide-item{
18    transition: all 1s;
19    display: inline-block;
20}
21.slide-enter{
22    opacity: 0;
23    transform: translateX(-30px);
24}

よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

アイテムタグに左右を判断できるようにクラスか属性を付けておきます。

js
1省略... class="message-content slide-item" :class="{ right: item.move == 'right' }"

クラスはどっちかが分かればいいので適当に調整して下さい。

あとは CSS で動きを分けられます。

css
1.slide-enter {
2    opacity: 0;
3    transform: translateX(-30px);
4}
5.slide-enter.right {
6    opacity: 0;
7    transform: translateX(30px);
8}