javascript - 悬停时的Vue 2动画问题

问题描述

我有两张图片，当悬停在第一张图片上时，会显示某个组件，第二张图片以类似的方式工作，显示另一个组件，当我决定将鼠标悬停在图片上时应用动画时，我的问题就开始了，即我想让它出现一个带有动画的组件，但是问题是动画只对第一个组件起作用，而对于第二个组件，不仅动画不起作用，它也不显示，你可以看看我的沙箱中的代码

如果您查看我的代码，您可能已经注意到我使用显示组件v-for，但是当我尝试手动显示组件时（即没有循环），一切对我来说都很好，就是这样

<div style="margin-top: 200px;">
  <slide-y-up-transition>
    <RedExperience v-show="img1" key="img1"/>
  </slide-y-up-transition>
  <slide-y-up-transition>
    <OrangeExperience v-show="img2" key="img2"/>
  </slide-y-up-transition>
  <slide-y-up-transition>
    <GreenExperience v-show="img4" key="img4"/>
  </slide-y-up-transition>
</div>

这是我的沙盒代码

<template>
  <div>
    <div style="display: flex; justify-content: center">
      <div v-bind:key="index" v-for="(girl, index) in girls">
        <img
          style="width: 200px; height: 200px; margin: 5px"
          @mouseover="mouseOver(girl)"
          @mouseout="mouseout(girl)"
          v-bind:src="girl.imgSrc"
          alt="Snow"
        />
      </div>
    </div>

    <slide-y-up-transition>
      <component
        v-for="(girl, index) in girls"
        v-show="girl.hovered"
        v-bind:key="index"
        v-bind:is="girl.componentName"
      ></component>
    </slide-y-up-transition>
  </div>
</template>


<script>
import { SlideYUpTransition } from "vue2-transitions";
import MyFirstComponent from "./colors/myycomponent";
import myOtherComponent from "./colors/myothercomponent";
export default {
  name: "HelloWorld",
  components: {
    MyFirstComponent,
    myOtherComponent,
    SlideYUpTransition,
  },
  data() {
    return {
      componentNames: ["MyFirstComponent", "myOtherComponent"],
      girls: [
        {
          imgSrc:
            "https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg",
          hovered: false,
          hoverColor: "#337700",
          componentName: "MyFirstComponent",
        },
        {
          imgSrc:
            "https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg",
          hovered: false,
          hoverColor: "#123456",
          componentName: "myOtherComponent",
        },
      ],
    };
  },

  methods: {
    mouseOver: function (girl) {
      girl.hovered = true;
    },

    mouseout: function (girl) {
      girl.hovered = false;
    },
  },
};
</script>

标签： javascriptvue.jsanimationvuejs2

<div v-for="(girl, index) in girls" v-bind:key="index"> <slide-y-up-transition> <component v-show="girl.hovered" v-bind:is="girl.componentName" ></component> </slide-y-up-transition> </div>

javascript - 悬停时的Vue 2动画问题

问题描述

解决方案

推荐阅读