当前位置：首页 > VUE

vue实现翻书效果

2026-02-17 09:15:20VUE

Vue实现翻书效果的方法

使用CSS 3D变换和动画

在Vue中结合CSS的3D变换和过渡效果，可以模拟翻书动画。通过动态绑定class或style，控制页面的翻转状态。

<template>
  <div class="book">
    <div 
      class="page" 
      :class="{ 'flipped': isFlipped }"
      @click="flipPage"
    >
      <div class="front">Front Content</div>
      <div class="back">Back Content</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFlipped: false
    };
  },
  methods: {
    flipPage() {
      this.isFlipped = !this.isFlipped;
    }
  }
};
</script>

<style>
.book {
  perspective: 1000px;
  width: 200px;
  height: 300px;
}
.page {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.page.flipped {
  transform: rotateY(180deg);
}
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
}
</style>

使用第三方库（如Turn.js）

Turn.js是一个专门用于实现翻书效果的JavaScript库，可以轻松集成到Vue项目中。

安装Turn.js：

npm install turn.js

在Vue组件中使用：

<template>
  <div id="flipbook">
    <div class="hard">Cover</div>
    <div class="hard">Back Cover</div>
  </div>
</template>

<script>
import 'turn.js'
export default {
  mounted() {
    $("#flipbook").turn({
      width: 800,
      height: 600,
      autoCenter: true
    });
  }
};
</script>

<style>
#flipbook {
  width: 800px;
  height: 600px;
}
#flipbook .page {
  background: white;
  color: black;
}
</style>

结合Vue过渡系统

利用Vue的过渡系统（<transition>和<transition-group>）可以创建更复杂的翻页动画。

<template>
  <transition name="flip" mode="out-in">
    <div :key="currentPage" class="page">
      {{ pageContent }}
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pages: {
        1: "Page 1 Content",
        2: "Page 2 Content"
      }
    };
  },
  computed: {
    pageContent() {
      return this.pages[this.currentPage];
    }
  },
  methods: {
    nextPage() {
      this.currentPage = Math.min(this.currentPage + 1, 2);
    },
    prevPage() {
      this.currentPage = Math.max(this.currentPage - 1, 1);
    }
  }
};
</script>

<style>
.flip-enter-active, .flip-leave-active {
  transition: all 0.5s;
}
.flip-enter {
  transform: rotateY(90deg);
  opacity: 0;
}
.flip-leave-to {
  transform: rotateY(-90deg);
  opacity: 0;
}
</style>