当前位置：首页 > VUE

vue实现图片翻转切换

2026-02-25 00:00:36VUE

Vue实现图片翻转切换

使用CSS3过渡和Vue数据绑定

在Vue中实现图片翻转效果，可以通过结合CSS3的transform和transition属性，配合Vue的数据绑定动态切换样式。

<template>
  <div class="flip-container" @click="flipImage">
    <div class="flipper" :class="{ flipped: isFlipped }">
      <div class="front">
        <img :src="frontImage" alt="Front Image">
      </div>
      <div class="back">
        <img :src="backImage" alt="Back Image">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFlipped: false,
      frontImage: 'path/to/front.jpg',
      backImage: 'path/to/back.jpg'
    }
  },
  methods: {
    flipImage() {
      this.isFlipped = !this.isFlipped
    }
  }
}
</script>

<style>
.flip-container {
  perspective: 1000px;
  width: 200px;
  height: 200px;
}

.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flipper.flipped {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}
</style>

使用Vue过渡组件

Vue的<transition>组件可以更方便地实现动画效果，结合CSS实现翻转。

<template>
  <div class="flip-container" @click="flipImage">
    <transition name="flip">
      <img v-if="!isFlipped" :src="frontImage" alt="Front Image" key="front">
      <img v-else :src="backImage" alt="Back Image" key="back">
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFlipped: false,
      frontImage: 'path/to/front.jpg',
      backImage: 'path/to/back.jpg'
    }
  },
  methods: {
    flipImage() {
      this.isFlipped = !this.isFlipped
    }
  }
}
</script>

<style>
.flip-container {
  width: 200px;
  height: 200px;
  position: relative;
}

.flip-enter-active, .flip-leave-active {
  transition: all 0.8s;
  position: absolute;
}

.flip-enter {
  transform: rotateY(90deg);
  opacity: 0;
}

.flip-leave-to {
  transform: rotateY(-90deg);
  opacity: 0;
}
</style>

使用第三方库

对于更复杂的翻转效果，可以考虑使用第三方动画库如animate.css或vue-flip。

安装vue-flip:

npm install vue-flip

使用示例:

<template>
  <flip>
    <div v-if="isFlipped" key="front">
      <img :src="frontImage" alt="Front Image">
    </div>
    <div v-else key="back">
      <img :src="backImage" alt="Back Image">
    </div>
  </flip>
</template>

<script>
import Flip from 'vue-flip'

export default {
  components: { Flip },
  data() {
    return {
      isFlipped: false,
      frontImage: 'path/to/front.jpg',
      backImage: 'path/to/back.jpg'
    }
  }
}
</script>