vuejs アニメーション

実現したいこと：
大きいメイン画像とその下に小さい画像３枚の組み合わせを作る。
小さい画像をマウスオーバーしたら大きい画像がマウスオーバーした画像に切り替わる。
その際に、画像の切り替え時にアニメーションの機能を入れる。
アニメーションがかかるのはマウスオーバーした段の画像のみで他の段ではなにもしない。

現在の状況：
アニメーションで切り替わるが１段目をマウスオーバーすると２、３段目もアニメーションがかかってしまう。
これを１段目なら１段目、２段目なら２段目とその段にあった画像にのみアニメーションをかけたいと思っています。

調べたり、こうかなと考えたりして動かしてみたのですが、なにをしても解決できずに質問させていただきました。回答いただけるとありがたいです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/test_a.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <ul id="example-1">
    <div v-for="(item, index) in items" id="restaurant">
      <!-- １つずつのお店 -->
      <div v-bind:class="restaurant_list" >
        <!-- 画像が表示されている列 -->
        <div v-bind:class="restaurant_image">
          <!-- 大きい写真の設定 -->
          <div>
            <transition name="animation" mode="out-in">
              <img v-bind:src="items[index].main_image" v-if="show" key="test1" v-bind:class="main_image"></img>
              <img v-bind:src="items[index].main_image" v-else key="test2" v-bind:class="main_image"></img>
            </transition>
          </div>
          <!-- 小見出しの写真 -->
          <div v-bind:class="image_label">
            <div>
              <img v-bind:src="item.image_sub1" v-bind:class="restaurant_image_images" v-on:mouseover="show = !show; imgchange1(index)" >
            </div>
            <div>
              <img v-bind:src="item.image_sub2" v-bind:class="restaurant_image_images" v-on:mouseover="show = !show; imgchange2(index)">
            </div>            
            <div>
              <img v-bind:src="item.image_sub3" v-bind:class="restaurant_image_images" v-on:mouseover="show = !show; imgchange3(index)">
            </div>
          </div>
        </div>
      </div>
    </div>
  </ul>
  <script type="text/javascript" src="../js/test_a.js"></script>
</body>
</html>



var example1 = new Vue({
  el: '#example-1',
  data:{
    //店名、写真、紹介文
    items: [
      { main_image: "../image/food.jpg", image_sub1:"../image/food.jpg", image_sub2:"../image/food1.jpg", image_sub3:"../image/food2.jpg", restaurant_name:"江戸政", restaurant_voice:"鶏肉の旨みを存分に味わえる、名物のタタキが人気の老舗焼き鳥",restaurant_chara:"焼き鳥好き", restaurant_popular:"人気店", introducter:"../image/introducter.jpg"},
      { main_image: "../image/taikojaya_1.jpg",image_sub1:"../image/taikojaya_2.jpg", image_sub2:"../image/taikojaya_3.jpg", image_sub3:"../image/taikojaya_4.jpg", restaurant_name:"たいこ茶屋", restaurant_voice:"お刺身食べ放題、ロケ地としても有名な海鮮料理屋さん",restaurant_chara:"海鮮好き", restaurant_popular:"人気店"},
      { main_image: "../image/chinese_restaurant_1.jpg",image_sub1:"../image/chinese_restaurant_1.jpg", image_sub2:"../image/chinese_restaurant_2.jpg", image_sub3:"../image/chinese_restaurant_3.jpg", restaurant_name:"チャイニーズレストラン虎穴", restaurant_voice:"ランチ限定の担々麺はゴマの香りが食欲をそそる逸品。馬喰横山近くの中華店" ,restaurant_chara:"中華好き", restaurant_popular:"人気店"}
    ],
    //お店の画像が並んでいる列の設定
    restaurant_image:"restaurant-image",
    //ひとつひとつのお店のリストの設定
    restaurant_list:"restaurant-list",
    //お店の一番大きい画像の設定
    main_image:"main-image",
    //小見出しの写真１枚ずつの設定
    restaurant_image_images:"restaurant-image-images",
    //小見出しのレイアウトの設定
    image_label:"image-label",  
    eval:"eval",
    show:true,
  },
  methods:{
    imgchange1:function(index){
      this.items[index].main_image = this.items[index].image_sub1;
    },
    imgchange2:function(index){
      this.items[index].main_image = this.items[index].image_sub2;
    },
    imgchange3:function(index){
      this.items[index].main_image = this.items[index].image_sub3;
    }
  }
})


.restaurant-image{
  display: block;
  width: 220px;
  height: 272px;
  flex: 0 0 220px;
}

.restaurant-list{
  height:272px;
  width:auto;
  margin-bottom:50px;
  position:relative;
  display:flex;
  box-sizing:border-box;
  padding-right:16px;
  padding-left:16px;
}

.main-image{
  position: relative;
    display: block;
    width: 220px;
    height: 220px;
    box-sizing: border-box;
}

.restaurant-image-images{
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 3px;
  cursor: pointer;
  transition: opacity .6s ease-out;
}

.image-label{
  display: flex;
  align-items: flex-end;
  margin-top: 8px;
  padding-left:30px;
}
.eval{
  display:flex;
}

/* アニメーションの設定 */
.animation-enter {
  opacity: 0;
}
.animation-enter-active {
  transition: opacity 0.5s;
}
.animation-enter-to {
  opacity: 1;
}
.animation-leave {
  opacity: 1;
}
.animation-leave-active {
  transition: opacity 0.3s;
}
.animation-leave-to {
  opacity: 0;
}

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

回答1件

ベストアンサー

アニメーションで切り替わるが１段目をマウスオーバーすると２、３段目もアニメーションがかかってしまう。

その原因は以下です。
・v-on:mouseoverでshowのtrue/falseが切り替わっている
・全ての大きい写真は、showが切り替わったタイミングで表示が切り替わっている

対策として以下のように修正すればよいでしょう。
・v-on:mouseoverで、そのイベントが起きたアイテムが持つshowのtrue/falseを切り替える
・大きい写真は、そのアイテムの持つshowが切り替わったタイミングで表示を切り替える

html
1  <ul id="example-1">
2    <div v-for="(item, index) in items" id="restaurant">
3      <!-- １つずつのお店 -->
4      <div v-bind:class="restaurant_list" >
5        <!-- 画像が表示されている列 -->
6        <div v-bind:class="restaurant_image">
7          <!-- 大きい写真の設定 -->
8          <div>
9            <transition name="animation" mode="out-in">
10              <img v-bind:src="items[index].main_image" v-if="item.show" key="test1" v-bind:class="main_image"></img>
11              <img v-bind:src="items[index].main_image" v-else           key="test2" v-bind:class="main_image"></img>
12            </transition>
13          </div>
14          <!-- 小見出しの写真 -->
15          <div v-bind:class="image_label">
16            <div>
17              <img v-bind:src="item.image_sub1" v-bind:class="restaurant_image_images" v-on:mouseover="item.show = !item.show; imgchange1(index)" >
18            </div>
19            <div>
20              <img v-bind:src="item.image_sub2" v-bind:class="restaurant_image_images" v-on:mouseover="item.show = !item.show; imgchange2(index)">
21            </div>            
22            <div>
23              <img v-bind:src="item.image_sub3" v-bind:class="restaurant_image_images" v-on:mouseover="item.show = !item.show; imgchange3(index)">
24            </div>
25          </div>
26        </div>
27      </div>
28    </div>
29  </ul>