class/card3d.js

  1. /**
  2.  * 卡片3d动画.
  3.  * {@link https://imondo.cn/files/3d.html 查看效果}
  4.  * @param { DOM } el 卡片dom集合
  5.  * @param { DOM } boxEl 卡片盒子dom
  6.  */
  8. class Card3d {
  9.   constructor(el, boxEl) {
  10.     this.el = el;
  11.     this.boxEl = boxEl;
  12.     this.page = 0;
  14.     this.configCss = [
  15.       { deg: 0, origin: "center" }, // 中
  16.       { deg: -90, origin: "bottom" }, // 下
  17.       { deg: 180, origin: "center" }, // 中
  18.       { deg: 90, origin: "top" } // 上
  19.     ]
  20.     this.group = [];
  22.     const boxH = this.boxEl.clientHeight;
  23.     this.translateZ = boxH / 2;
  24.     this.boxEl.style.transform = `translateZ(-${this.translateZ}px) rotateX(0deg)`;
  26.     const pageSize = el.length
  27.     this.pageSize = pageSize;
  28.     this.maxSize = pageSize - 1;
  29.     this.init();
  30.     this.initCss();
  31.   }
  33.   /**
  34.    * 初始化事件
  35.    * 让第一个，第二个卡片显示，以下的隐藏
  36.    */
  37.   init() {
  38.     this.block({
  39.       index: 1,
  40.       hideNext: true
  41.     });
  42.   }
  44.   /**
  45.    * 初始化样式
  46.    * 给每个卡片设置 transform 样式
  47.    */
  48.   initCss() {
  49.     const { el: $els, configCss, translateZ } = this;
  50.     this.group = this.sliceGroup($els);
  51.     this.arrForch(this.group, function (item, index) {
  52.       this.arrForch(item, function (el, i) {
  53.         const config = configCss[i];
  54.         const sym = i === 0 ? "" : "-";
  55.         el.style.transform = `translateZ(${sym}${translateZ}px) rotateX(${config.deg}deg)`
  56.         el.style.transformOrigin = `${config.origin}`
  57.         // el.style.backfaceVisibility = 'hidden'
  58.       })
  59.     })
  60.   }
  62.   /**
  63.    * 分割数组
  64.    * @param {Array} data  原数组
  65.    * @param {Number} size  每一个分割的数组长度
  66.    */
  67.   sliceGroup(data = [], size = 4) {
  68.     const result = [];
  69.     for (let i = 0, len = data.length; i < len; i += size) {
  70.       result.push(Array.prototype.slice.call(data, i, i + size));
  71.     }
  72.     return result;
  73.   }
  75.   /**
  76.    * 动画移动
  77.    * @param {Function} callback 移动后回调函数
  78.    */
  79.   move(callback) {
  80.     this.rotateX = 90 * this.page;
  81.     const nextPage = this.page + 1;
  82.     this.block({
  83.       index: this.page
  84.     });
  85.     this.block({
  86.       index: nextPage,
  87.       hideNext: true
  88.     });
  89.     if (this.page === this.pageSize) return;
  90.     this.boxEl.style.transform = `translateZ(-${this.translateZ}px) rotateX(${this.rotateX}deg)`
  91.     callback && callback(this.el[this.page], this.page);
  92.   }
  94.   /**
  95.    * 上滑动
  96.    * @param {Function} callback 移动后回调函数
  97.    */
  98.   pageUp(callback) {
  99.     if (this.page >= this.maxSize) {
  100.       return;
  101.     };
  102.     this.page++
  103.     this.move(callback);
  104.   }
  106.   /**
  107.    * 下滑动
  108.    * @param {Function} callback 移动后回调函数
  109.    */
  110.   pageDown(callback) {
  111.     if (this.page <= 0) {
  112.       return;
  113.     }
  114.     this.page--
  115.     this.move(callback);
  116.   }
  118.   /**
  119.    * DOM 元素对象循环
  120.    * @param {Array} els DOM 元素集合
  121.    * @param {Function} callback 循环回调
  122.    */
  123.   arrForch(els, callback) {
  124.     const _this = this;
  125.     Array.prototype.forEach.call(els, function () {
  126.       callback.call(_this, ...arguments);
  127.     })
  128.   }
  130.   /**
  131.    * 对 DOM 元素设置 display 样式
  132.    * @param {Number} index 元素个数下标
  133.    * @param {Boolean} hideNext 是否该元素后面的兄弟元素都 display: none，默认值 true
  134.    */
  135.   block({ index, hideNext = false }) {
  136.     if (hideNext) {
  137.       this.arrForch(this.el, function (item, i) {
  138.         this.el[i].style.opacity = index === i ? 1 : i > index ? 0 : 1;
  139.       })
  140.     } else {
  141.       this.el[index].style.opacity = 1;
  142.     }
  144.   }
  145. }