vue 书本翻页的效果

第一种效果

1.对应的效果图。如下：

111.gif

2.对应翻页的代码。如下：

<template>
  <div class="box_box">
    <div class="book">
      <div class="page page4">最后一页</div>
      <div class="page page3">第三页</div>
      <div class="page page2">第二页</div>
      <div class="page page1">第一页</div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
    }
  },
  mounted(){
    var pages = document.querySelectorAll('.page')
    pages.forEach(v => {
      v.onclick = function () {
        v.style.transform = 'perspective(1500px) rotateY(-180deg)'
      }
    });
  },
}
</script>

<style lang="scss" scoped>
.box_box{
  width: 700px !important;
  height: 800px !important;
  position: relative;
  .book{
    position: relative;
    width: 200px;
    height: 300px;
    border: 1px solid #000;
    transform-style: preserve-3d;
    margin: 200px auto;
  }
  .page {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: left;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: perspective(1500px) rotateY(0deg);
    transition: transform 1s ease-in;
    text-align: center;
    line-height: 300px;
    background: plum;
  }
}
</style>

第二种效果

1.对应的效果图。如下：

111.gif

2.对应翻页的代码。如下：

<template>
  <div class="box_box">
    <div class="book">
      <div class="page page4">
        <div class="page_content">最后一页</div>
        <div class="page_footer">
          <div @click="prevPage($event)">第4页</div> / <div @click="nextPage($event)">共4页</div>
        </div>
      </div>
      <div class="page page3">
        <div class="page_content">第三页</div>
        <div class="page_footer">
          <div @click="prevPage($event)">第3页</div> / <div @click="nextPage($event)">共4页</div>
        </div>
      </div>
      <div class="page page2">
        <div class="page_content">第二页</div>
        <div class="page_footer">
          <div @click="prevPage($event)">第2页</div> / <div @click="nextPage($event)">共4页</div>
        </div>
      </div>
      <div class="page page1">
        <div class="page_content">第一页</div>
        <div class="page_footer">
          <div @click="prevPage($event)">第1页</div> / <div @click="nextPage($event)">共4页</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
    }
  },
  mounted(){
  },
  methods:{
    // 上一页
    prevPage(e){
      // 获取到 class 名为 page 的元素下一个兄弟元素
      let a = e.currentTarget.parentNode.parentNode.nextElementSibling;
      if(a != null){
        a.style.transform = 'perspective(2000px) rotateY(0deg)';
      }
    },
    // 下一页
    nextPage(e){
      // 获取到 class 名为 page 的元素
      let a = e.currentTarget.parentNode.parentNode;
      // 获取到 class 名为 page 的元素上一个兄弟元素
      let b = e.currentTarget.parentNode.parentNode.previousElementSibling;
      if(b != null){
        a.style.transform = 'perspective(2000px) rotateY(-180deg)';
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.box_box{
  width: 700px !important;
  height: 800px !important;
  position: relative;
  .book{
    position: relative;
    width: 200px;
    height: 300px;
    border: 1px solid #000;
    transform-style: preserve-3d;
    margin: 200px auto;
  }
  .page {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: left;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: perspective(1500px) rotateY(0deg);
    transition: transform 1s ease-in;
    background: plum;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .page_content{
      text-align: center;
      line-height: 260px;
    }
    .page_footer{
      display: flex;
      align-items: center;
      text-align: right;
      justify-content: flex-end;
      padding: 0px 10px 10px 0px;
      div{
        cursor: pointer;
      }
    }
  }
}
</style>