質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

解決済

vuejs アニメーション

bskbbb
bskbbbggg

総合スコア22

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

1回答

0評価

0クリップ

129閲覧

投稿2022/06/21 02:47

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

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

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

<!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"> <!-- 1つずつのお店 --> <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", //小見出しの写真1枚ずつの設定 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; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。