三、执行动画

```java script
// 当没有options的时候，为自然滑动，也就是定时器滑动
function doAnimate(towards, options) {
    if (children.length === 0) return;
    if (!options && children.length < 2) return;

    var prevPage, nextPage, currentPage, pageWidth, offsetLeft;
    var pageCount = pages.length;

    // 定时器滑动
    if (!options) {
        pageWidth = element.clientWidth;
        currentPage = pages[index];
        prevPage = pages[index - 1];
        nextPage = pages[index + 1];
        if (continuous && pages.length > 1) {
            if (!prevPage) {
                prevPage = pages[pages.length - 1];
            }

            if (!nextPage) {
                nextPage = pages[0];
            }
        }

        // 计算上一页与下一页之后
        // 重置位移
        // 参看doOnTouchMove
        // 其实这里的options 传与不传也就是获取上一页信息与下一页信息
        if (prevPage) {
            prevPage.style.display = 'block';
            translate(prevPage, -pageWidth);
        }

        if (nextPage) {
            nextPage.style.display = 'block';
            translate(nextPage, pageWidth);
        }
    } else {
        prevPage = options.prevPage;
        currentPage = options.currentPage;
        nextPage = options.nextPage;
        pageWidth = options.pageWidth;
        offsetLeft = options.offsetLeft;
    }

    var newIndex;
    var oldPage = children[index];

    // 得到滑动之后的新的索引
    if (towards === 'prev') {
        if (index > 0) {
            newIndex = index - 1;
        }
        if (continuous && index === 0) {
            newIndex = pageCount - 1;
        }
    } else if (towards === 'next') {
        if (index < pageCount - 1) {
            newIndex = index + 1;
        }
        if (continuous && index === pageCount - 1) {
            newIndex = 0;
        }
    }

    // 动画完成之后的回调
    var callback = function() {
        // 得到滑动之后的激活页面，添加激活class
        // 重新赋值索引
        if (newIndex !== undefined) {
            var newPage = children[newIndex];
            oldPage.classList.remove('is-active');
            newPage.classList.add('is-active');
            index = newIndex
        }

        if (isDone) {
            end();
        }
      
        if (prevPage) {
            prevPage.style.display = '';
        }

        if (nextPage) {
            nextPage.style.display = '';
        }
    }

    setTimeout(function() {
        // 向后滑动
        if (towards === 'next') {
            isDone = true;
            before(currentPage);
            // 当前页执行动画，完成后执行callback
            translate(currentPage, -pageWidth, speed, callback);
            if (nextPage) {
                // 下一面移动视野中
                translate(nextPage, 0, speed)
            }
        } else if (towards === 'prev') {
            isDone = true;
            before(currentPage);
            translate(currentPage, pageWidth, speed, callback);
            if (prevPage) {
                translate(prevPage, 0, speed);
            }
        } else {
          // 如果既不是左滑也不是右滑
          isDone = true;
          // 当前页面依旧处于视野中
          // 上一页和下一页滑出
          translate(currentPage, 0, speed, callback);
          if (typeof offsetLeft !== 'undefined') {
              if (prevPage && offsetLeft > 0) {
                    translate(prevPage, pageWidth * -1, speed);
              }
              if (nextPage && offsetLeft < 0) {
                    translate(nextPage, pageWidth, speed);
              }
          } else {
            if (prevPage) {
              translate(prevPage, pageWidth * -1, speed);
            }

            if (nextPage) {
              translate(nextPage, pageWidth, speed);
            }
          }
       }
    }, 10);
}
```

?

后置工作:

清除一次滑动周期中保存的状态信息

dragging = false;
dragState = {};

总结

整体来说实现原理还是比较简单的，滑动开始记录初始位置，计算上一页与下一页的应该展示的页面；滑动中计算位移，计算上一页下一页的位移；滑动结束根据位移结果执行相应的动画。

有一个细节就是，在滑动中transition的效果置为空，是为了防止在滑动中上一页与下一页因为过渡存在而位移得不自然，在滑动结束后再给他们加上动画效果。