vue3 书本仿真翻页动画

Vue3中的书本仿真翻页动画通常通过结合Vue.js的响应式特性、CSS样式和JavaScript处理来实现。以下是一个简单的步骤描述：

1. **HTML结构**:
创建一个虚拟的书籍模型，比如包含多个`<div>`元素，每个代表一页，可以设置一个统一的容器用于显示当前页和下一页。

<div class="book">
  <div v-for="page in pages" :key="page.id" :class="{ current: page.isCurrent }">{{ page.content }}</div>
</div>

2. **Vue组件**:
定义一个Vue组件，绑定数据`pages`表示书的内容，并管理当前页状态。可以创建一个`data()`函数初始化这些变量。

export default {
  data() {
    return {
      pages: [
        { id: 1, content: '第一页', isCurrent: true },
        { id: 2, content: '第二页' },
        // 更多页面...
      ],
      currentPage: 1,
    };
  },
};

3. **CSS样式**:
编写一些CSS规则来模拟翻页效果，比如改变`.current`类的选择器中的内容位置，添加过渡动画。

.book {
  position: relative;
  overflow: hidden;
}

.page {
  position: absolute;
  transition: transform 0.5s ease-in-out;
}

.current {
  top: 0;
}

.next-page {
  transform: translateY(100%);
}

4. **JavaScript处理**:
使用Vue的`v-if`和`v-else-if`指令处理翻页逻辑。当用户交互（如点击按钮或触屏滑动）时，更新`currentPage`并应用相应的CSS变换。

methods: {
  turnPage(direction) {
    this.currentPage += direction;
    if (this.currentPage > this.pages.length - 1) {
      this.currentPage = 1;
    } else if (this.currentPage < 1) {
      this.currentPage = this.pages.length;
    }
    
    const next = this.pages[this.currentPage];
    next.isCurrent ? this.$refs.book.scrollTop = 0 : this.$refs.book.style.transform = 'translateY(-100%)';
  },
},

将`turnPage`方法绑定到合适的事件上，比如按钮点击或触摸滑动。