前言

最近看了一些文章，知道了实现引导动画的基本原理，所以决定来自己亲手做一个通用的引导动画类。

我们先来看一下具体的效果：点这里

原理

1. 通过维护一个Modal实例，使用Modal的mask来隐藏掉页面的其他元素。

2. 根据用户传入的需要引导的元素列表，依次来展示元素。展示元素的原理：通过cloneNode来复制一个当前要展示元素的副本，通过当前元素的位置信息来展示副本，并且通过z-index属性来让其在ModalMask上方展示。大致代码如下：

   const newEle = target.cloneNode(true); const rect = target.getBoundingClientRect(); newEle.style.zIndex = '1001'; newEle.style.position = 'fixed'; newEle.style.width = `${rect.width}px`; newEle.style.height = `${rect.height}px`; newEle.style.left = `${rect.left}px`; newEle.style.top = `${rect.top}px`; this.modal.appendChild(newEle);

3. 当用户点击了当前展示的元素时，则展示下一个元素。

原理听起来是不是很简单？但是其实真正实现起来，还是有坑的。比如说，当需要展示的元素不在页面的可视范围内如何处理。

当要展示的元素不在页面可视范围内，主要分为三种情况：

1. 展示的元素在页面可视范围的上边。
2. 展示的元素在页面可视范围的下边。
3. 展示的元素在可视范围内，可是展示不全。

由于我是通过getBoundingClientRect这个api来获取元素的位置、大小信息的。这个api获取的位置信息是相对于视口左上角位置的（如下图）。

对于第一种情况，这个api获取的top值为负值，这个就比较好处理，直接调用window.scrollBy(0, rect.top)来将页面滚动到展示元素的顶部即可。

而对于第二、三种情况，我们可以看下图

从图片我们可以看出来，当rect.top+rect.height > window.innerHeight的时候，说明展示的元素不在视野范围内，或者展示不全。对于这种情况，我们也可以通过调用window.scrollBy(0, rect.top)的方式来让展示元素尽可能在顶部。

对上述情况的调节代码如下：

// 若引导的元素不在页面范围内，则滚动页面到引导元素的视野范围内 adapteView(ele) {     const rect = ele.getBoundingClientRect();     const height = window.innerHeight;     if (rect.top < 0 || rect.top + rect.height > height) {         window.scrollBy(0, rect.top);     } }

接下来，我们就来一起实现下这个引导动画类。

第一步：实现Modal功能

我们先不管具体的展示逻辑实现，我们先实现一个简单的Modal功能。

class Guidences {   constructor() {     this.modal = null;     this.eleList = [];   }   // 入口函数   showGuidences(eleList = []) {     // 允许传入单个元素     this.eleList = eleList instanceof Array ? eleList : [eleList];     // 若之前已经创建一个Modal实例，则不重复创建     this.modal || this.createModel();   }   // 创建一个Modal实例   createModel() {     const modalContainer = document.createElement('div');     const modalMask = document.createElement('div');     this.setMaskStyle(modalMask);     modalContainer.style.display = 'none';     modalContainer.appendChild(modalMask);     document.body.appendChild(modalContainer);     this.modal = modalContainer;   }    setMaskStyle(ele) {     ele.style.zIndex = '1000';     ele.style.background = 'rgba(0, 0, 0, 0.8)';     ele.style.position = 'fixed';     ele.style.top = 0;     ele.style.right = 0;     ele.style.bottom = 0;     ele.style.left = 0;   }     hideModal() {     this.modal.style.display = 'none';     this.modal.removeChild(this.modalBody);     this.modalBody = null;   }    showModal() {     
                        
关键字：