vue实现书本翻页动画效果实例详解


Posted in Vue.js onApril 08, 2022

vue实现书本翻页动画效果实例详解

偶然兴起,想要用vue来做一个书本的组件,有了这个想法后边开始动手,先简单地实现基本的效果,为后续封装为组件进行准备工作,实现该效果的要使用vue + css + JavaScript。

关键字

transform

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

语法为transform: none|*transform-functions*; 我们主要使用到其旋转效果,我们可以这样写。

transform: rotateY(90deg)
//表示沿Y轴旋转90度

animation

既然是要实现动画效果,那么肯定少不了animation的出场了,

animation属性的语法为: animation: name duration timing-function delay iteration-count direction fill-mode play-state;我们需要用到的只是前两个属性,name和duration,分别为指定要绑定到选择器的关键帧的名称动画指定需要多少秒或毫秒完成 我们可以这样写

animation: fanPre 2s;

@keyframes

使用@keyframes规则,你可以创建动画,创建动画是通过逐步改变从一个CSS样式设定到另一个,在动画过程中,可以更改CSS样式的设定多次,指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。

语法为:@keyframes *animationname* {*keyframes-selector* {*css-styles;}* } 我们可以这样写

@keyframes fanPre {
  0% {
    transform: rotateY(0deg);
    background-color: rgba(122, 112, 112);
  }
  50% {
    background-color: rgba(122, 112, 112);
  }
  75% {
    background-color: rgba(122, 112, 112);
  }
  100% {
    transform: rotateY(-140deg);
    background-color: none;
  }
}

var

此var并不是JavaScript中的var而是css中的var,我们可以使用其来实现css与vue数据继续数据交换,及css中可以使用vue定义的data来进行属性设置,具体如下:

//html
<div :style="{ '--speed': speed }"></div>
//javascript
props: {
    speed: {
      type: String,
      default: "2s",
    }
}
//css
<style vars="{ speed, degs }" lang="scss" scoped>
    animation: fanPre var(--speed);
</style>

实现

知道了上面这几个关键词之后,我们便可以开始着手实现该效果了,首先我们需要一个书本页面列表数据

//书本页面列表
    pagesList: {
      type: Array,
      default: () => {
        return [
          {
            title: "关雎",
            text: [
              "关关雎鸠,在河之洲。窈窕淑女,君子好逑。",
              "参差荇菜,左右流之。窈窕淑女,寤寐求之。",
              "求之不得,寤寐思服。悠哉悠哉,辗转反侧。",
              "参差荇菜,左右采之。窈窕淑女,琴瑟友之。",
              "参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。",
            ],
          },
          {
            title: "声声慢·寻寻觅觅",
            text: [
              "寻寻觅觅,冷冷清清,凄凄惨惨戚戚。乍暖还寒时候,最难将息。三杯两盏淡酒,怎敌他、晚来风急!雁过也,正伤心,却是旧时相识。",
              "满地黄花堆积,憔悴损,如今有谁堪摘?守着窗儿,独自怎生得黑!梧桐更兼细雨,到黄昏、点点滴滴。这次第,怎一个愁字了得!",
            ],
          },
          {
            title: "青玉案·元夕",
            text: [
              "东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动,玉壶光转,一夜鱼龙舞。",
              "蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首,那人却在,灯火阑珊处。",
            ],
          },
          {
            title: "蝶恋花·伫倚危楼风细细",
            text: [
              "伫倚危楼风细细,望极春愁,黯黯生天际。草色烟光残照里,无言谁会凭阑意。",
              "拟把疏狂图一醉,对酒当歌,强乐还无味。衣带渐宽终不悔,为伊消得人憔悴。",
            ],
          },
          {
            title: "雨霖铃·秋别",
            text: [
              "寒蝉凄切,对长亭晚,骤雨初歇。都门帐饮无绪,留恋处,兰舟催发。执手相看泪眼,竟无语凝噎。念去去,千里烟波,暮霭沉沉楚天阔。",
              "多情自古伤离别,更那堪,冷落清秋节!今宵酒醒何处?杨柳岸,晓风残月。此去经年,应是良辰好景虚设。便纵有千种风情,更与何人说",
            ],
          },
        ];
      },
    },

将数据渲染到页面上,如下例子

<div
    @click="turnPage(1)"
    class="j-book-page"
    :key="'page-now-' + index"
    :style="getPageStyle(index)"
>
    <h3>{{ nowPage.title }}</h3>
    <p
      v-for="(t, nowPageInd) in nowPage.text"
      :key="'nowPage-' + nowPageInd"
    >
      {{ t }}
    </p>
</div>

页面翻页功能实现如下,使用currentPage来记录当前展示页面页数,使用flag来区分是上一页还是下一页翻页,并进行相应的翻页操作。其中要注意对点击事件进行防抖操作,防止翻页过快,具体代码如下:

turnPage(flag) {
      if (!this.canTurn) return;
      if (this.currentPage <= this.pagesList.length)
        this.setPage(this.currentPage, flag);
      if (this.currentPage < this.pagesList.length && this.currentPage > 0) {
        this.canTurn = false;
        setTimeout(() => {
          this.canTurn = true;
        }, parseInt(this.speed) * 1000 - 100);
      }
      if (flag === 1) {
        if (this.currentPage < this.pagesList.length) {
          this.currentPage++;
          this.nextClick = true;
          this.lastClick = false;
        }
      } else {
        if (this.currentPage > 0) {
          this.currentPage--;
          this.nextClick = false;
          this.lastClick = true;
        }
      }
    },

完整代码

<template>
  <div class="j-book" :style="getBookStyle()">
    <div :style="{ '--speed': speed, '--degs': degs }">
      <div
        class="j-book-page-pre"
        @click="turnPage(-1)"
        v-if="currentPage > 0 && showCover"
      >
        <div class="j-book-page">
          <h3>{{ prePage.title }}</h3>
          <p v-for="(t, textInd) in prePage.text" :key="'prePage-' + textInd">
            {{ t }}
          </p>
        </div>
      </div>
      <div class="j-book-pages">
        <template v-for="(item, index) in pagesList">
          <div
            @click="turnPage(-1)"
            class="j-book-page turn-page-ani"
            v-if="currentPage === index + 2 && nextClick"
            :key="'page-last--' + index"
            :style="getPageStyle(index)"
          >
            <h3>{{ item.title }}</h3>
            <p v-for="(t, itemInd) in item.text" :key="'item-' + itemInd">
              {{ t }}
            </p>
          </div>
          <div
            @click="turnPage(-1)"
            class="j-book-page turn-page-ani"
            v-if="currentPage === 1 && nextClick"
            :key="'page-last-' + index"
            :style="getPageStyle(index)"
          >
            <h3>{{ cover.title }}</h3>
            <p v-for="(t, coverInd) in cover.text" :key="'cover-' + coverInd">
              {{ t }}
            </p>
          </div>
          <div
            @click="turnPage(1)"
            class="j-book-page turn-page-pre-ani"
            v-if="lastClick && currentPage === 0"
            :key="'page-pre-currentPage' + index"
            :style="getPageStyle(5)"
          >
            <h3>{{ cover.title }}</h3>
            <p v-for="(t, coverInd) in cover.text" :key="'cover-0-' + coverInd">
              {{ t }}
            </p>
          </div>
          <div
            @click="turnPage(1)"
            class="j-book-page turn-page-pre-ani"
            v-if="lastClick && currentPage === index + 1"
            :key="'page-pre-' + index"
            :style="getPageStyle(5)"
          >
            <h3>{{ item.title }}</h3>
            <p v-for="(t, itemInd) in item.text" :key="'item-0-' + itemInd">
              {{ t }}
            </p>
          </div>
          <div
            @click="turnPage(1)"
            class="j-book-page"
            :key="'page-now-' + index"
            :style="getPageStyle(index)"
          >
            <h3>{{ nowPage.title }}</h3>
            <p
              v-for="(t, nowPageInd) in nowPage.text"
              :key="'nowPage-' + nowPageInd"
            >
              {{ t }}
            </p>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "book",
  props: {
    width: {
      type: Number,
      default: 300,
    },
    height: {
      type: Number,
      default: 400,
    },
    speed: {
      type: String,
      default: "2s",
    },
    //书本页面列表
    pagesList: {
      type: Array,
      default: () => {
        return [
          {
            title: "关雎",
            text: [
              "关关雎鸠,在河之洲。窈窕淑女,君子好逑。",
              "参差荇菜,左右流之。窈窕淑女,寤寐求之。",
              "求之不得,寤寐思服。悠哉悠哉,辗转反侧。",
              "参差荇菜,左右采之。窈窕淑女,琴瑟友之。",
              "参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。",
            ],
          },
          {
            title: "声声慢·寻寻觅觅",
            text: [
              "寻寻觅觅,冷冷清清,凄凄惨惨戚戚。乍暖还寒时候,最难将息。三杯两盏淡酒,怎敌他、晚来风急!雁过也,正伤心,却是旧时相识。",
              "满地黄花堆积,憔悴损,如今有谁堪摘?守着窗儿,独自怎生得黑!梧桐更兼细雨,到黄昏、点点滴滴。这次第,怎一个愁字了得!",
            ],
          },
          {
            title: "青玉案·元夕",
            text: [
              "东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动,玉壶光转,一夜鱼龙舞。",
              "蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首,那人却在,灯火阑珊处。",
            ],
          },
          {
            title: "蝶恋花·伫倚危楼风细细",
            text: [
              "伫倚危楼风细细,望极春愁,黯黯生天际。草色烟光残照里,无言谁会凭阑意。",
              "拟把疏狂图一醉,对酒当歌,强乐还无味。衣带渐宽终不悔,为伊消得人憔悴。",
            ],
          },
          {
            title: "雨霖铃·秋别",
            text: [
              "寒蝉凄切,对长亭晚,骤雨初歇。都门帐饮无绪,留恋处,兰舟催发。执手相看泪眼,竟无语凝噎。念去去,千里烟波,暮霭沉沉楚天阔。",
              "多情自古伤离别,更那堪,冷落清秋节!今宵酒醒何处?杨柳岸,晓风残月。此去经年,应是良辰好景虚设。便纵有千种风情,更与何人说",
            ],
          },
        ];
      },
    },
    //书本封面
    cover: {
      type: Object,
      default: () => {
        return {
          title: "封面",
          text: ["封面"],
        };
      },
    },
  },
  data() {
    return {
      currentPage: 0,
      nextClick: false,
      lastClick: false,
      prePage: {},
      nowPage: {},
      canTurn: true,
      degs: "0deg",
      showCover: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.nowPage = this.cover;
    },
    getBookStyle() {
      let res = "";
      res += "width:" + this.width + "px;";
      res += "height:" + this.height + "px;";
      res += "'--speed':" + this.speed + ";";
      res += "transform: rotate(" + this.degs + ");";
      return res;
    },
    getPageStyle(index) {
      let res = "";
      res += "z-index:" + (this.pagesList.length - index) + ";";
      return res;
    },
    setPage(page, flag) {
      if (flag === -1) {
        this.prePage = this.pagesList[page - 3] || this.cover;
        this.nowPage = this.pagesList[page - 1];
      } else {
        this.prePage = this.pagesList[page - 2] || this.cover;
        this.nowPage =
          this.pagesList[ page ] || this.pagesList[this.pagesList.length - 1];
      }
      let speed = this.speed;
      speed = parseInt(speed) * 1000 - 500;
      setTimeout(() => {
        if (this.currentPage === 1) {
          this.showCover = true;
        }
        if (this.currentPage === 0) {
          this.showCover = false;
        }
        if (flag === -1) {
          this.nowPage = this.pagesList[this.currentPage - 1] || this.cover;
          if (this.currentPage === 0) {
            this.degs = "0deg";
          }
        } else {
          this.degs = "-5deg";
          this.prePage = this.pagesList[this.currentPage - 2] || this.cover;
        }
      }, speed);
    },
    turnPage(flag) {
      if (!this.canTurn) return;
      if (this.currentPage <= this.pagesList.length)
        this.setPage(this.currentPage, flag);
      if (this.currentPage < this.pagesList.length && this.currentPage > 0) {
        this.canTurn = false;
        setTimeout(() => {
          this.canTurn = true;
        }, parseInt(this.speed) * 1000 - 100);
      }
      if (flag === 1) {
        if (this.currentPage < this.pagesList.length) {
          this.currentPage++;
          this.nextClick = true;
          this.lastClick = false;
        }
      } else {
        if (this.currentPage > 0) {
          this.currentPage--;
          this.nextClick = false;
          this.lastClick = true;
        }
      }
    },
  },
};
</script>

<style vars="{ speed, degs }" lang="scss" scoped>
.j-book {
  background-color: gray;
  position: relative;
  box-shadow: 30px 0px 30px rgb(0, 0, 0, 0.6) inset;
  transform: rotate(var(--degs));
  color: #dec38f;
  .j-book-page-pre {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-size: 100%;
    transform-origin: left;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    background-color: rgba(122, 112, 112);
    transform: rotateY(-140deg);
    .j-book-page {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
  .j-book-pages {
    position: absolute;
    width: 100%;
    height: 100%;

    .turn-page-pre-ani {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-size: 100%;
      transform-origin: left;
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
      transform: rotateY(0deg);
      animation: fanPre var(--speed);
    }
    @keyframes fanPre {
      0% {
        transform: rotateY(-140deg);
        background-color: rgba(122, 112, 112);
      }
      50% {
        background-color: rgba(122, 112, 112);
      }
      100% {
        transform: rotateY(0deg);
        background-color: none;
      }
    }
    .turn-page-ani {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-size: 100%;
      transform-origin: left;
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
      transform: rotateY(-140deg);
      animation: fan var(--speed);
    }
    @keyframes fan {
      0% {
        transform: rotateY(0deg);
        background-color: none;
      }
      100% {
        transform: rotateY(-140deg);
        background-color: rgba(122, 112, 112);
      }
    }
    .j-book-page {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      h3 {
        text-align: center;
      }
      p {
      }
    }
  }
  .j-book-btns {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
}
</style>

更多关于VUE特效请查看下面的相关链接

Vue.js 相关文章推荐
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue实现列表拖拽排序的示例代码
vue实现可以快进后退的跑马灯组件
Apr 08 #Vue.js
Axios代理配置及封装响应拦截处理方式
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 #Vue.js
vue实现拖拽交换位置
Apr 07 #Vue.js
Vue.Draggable实现交换位置
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
You might like
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
ubuntu上安装python的实例方法
2019/09/30 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
感恩父母的演讲稿
2014/05/06 职场文书
企业介绍信范文
2015/01/30 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技