vue实现折纸翻书

Vue实现折纸翻书效果

要实现折纸翻书效果，可以利用CSS 3D变换和Vue的动画过渡功能。以下是一个基本实现方案：

基础HTML结构

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

Vue组件脚本

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

CSS样式

.book-container {
  perspective: 1000px;
  width: 300px;
  height: 400px;
}

.book {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  cursor: pointer;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  transition: transform 1s;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.front {
  background-color: #f5f5f5;
  transform: rotateY(0deg);
  z-index: 2;
}

.back {
  background-color: #e5e5e5;
  transform: rotateY(180deg);
}

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

.back.flipped {
  transform: rotateY(0deg);
}

多页翻书实现

对于多页翻书效果，可以使用动态组件和过渡：

<template>
  <div class="book">
    <transition name="flip" mode="out-in">
      <div :key="currentPage" class="page">
        {{ pages[currentPage] }}
      </div>
    </transition>
    <button @click="prevPage">Previous</button>
    <button @click="nextPage">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 0,
      pages: [
        'Page 1 Content',
        'Page 2 Content',
        'Page 3 Content'
      ]
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 0) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.pages.length - 1) {
        this.currentPage++
      }
    }
  }
}
</script>

.flip-enter-active, .flip-leave-active {
  transition: all 0.7s;
}

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

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

.page {
  width: 300px;
  height: 400px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 20px auto;
  border: 1px solid #ddd;
}

高级3D翻页效果

要实现更逼真的3D翻页效果，可以使用CSS clip-path和transform-origin：

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transition: transform 1s;
  backface-visibility: hidden;
}

.page.flipping {
  transform: rotateY(-180deg);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

这种方法可以创建更真实的书本翻页效果，通过调整transform-origin和阴影效果增强立体感。