[Vuejs]-Vue 2 animation issue on hover

by

3👍

✅

the problem is in your loop, transitions can only be used on a single element.

So do your loop this way to solve it.

<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>
👤Vinicius Silveira Alves

1👍

your full code has to be like this.

<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, index)"
          @mouseout="mouseout(girl, index)"
          v-bind:src="girl.imgSrc"
          alt="Snow"
        />
      </div>
    </div>
   <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>
  </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://i.pinimg.com/originals/a9/76/af/a976af5c7bf3cc5b05a1b301334e0f68.jpg",
          hovered: false,
          hoverColor: "#123456",
          componentName: "myOtherComponent",
        },
      ],
    };
  },

  methods: {
    mouseOver: function (girl, index) {
      this.girls[index].hovered = true;
    },

    mouseout: function (girl, index) {
      this.girls[index].hovered = false;
    },
  },
};
</script>
👤SefaUn

Leave a comment