前端vue点击图片然后改变图片有反转动画

可以使用Vue的过渡动画来实现图片反转的效果。具体步骤如下：

1. 在Vue组件中，给需要反转的图片添加一个点击事件，例如：

<template>
  <div>
    <img :src="imageUrl" @click="flipImage">
  </div>
</template>

2. 在组件的data中添加一个变量（例如isFlipped）来控制图片反转的状态，初始值为false:

<script>
export default {
  data() {
    return {
      isFlipped: false,
      imageUrl: '图片地址'
    };
  },
  methods: {
    flipImage() {
      this.isFlipped = !this.isFlipped;
    }
  }
};
</script>

3. 在组件的样式中，添加一个类来实现反转的动画效果，例如：

<style>
.flip-container {
  perspective: 1000px;
}
.flip-container img {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-container img.flipped {
  transform: rotateY(180deg);
}
</style>

4. 在模板中，给图片容器添加一个类名（例如flip-container）并绑定一个动态类名（根据isFlipped的值来判断是否添加flipped类名），例如：

<template>
  <div class="flip-container" :class="{ flipped: isFlipped }">
    <img :src="imageUrl" @click="flipImage">
  </div>
</template>

这样，当用户点击图片时，就会触发flipImage方法，修改isFlipped的值，从而添加或移除flipped类名，实现反转动画效果。