移动端前端动画之，年度总结翻页淡入淡出，动画间隔执行

一、具体场景

公司要求做一个H5的页面，可以翻页，做出每一页淡入淡出的效果 （安排）
因为页面内容不多，所以我采取的是一个大的div去装载多个div页面的方式
然后让这些装载页面的div绝对定位在最外面的大盒子中，通过控制每个页面
div的z-index来决定显示的页面

血泪分割点

一开始我并不是要用z-index这种方式的，而是一整个div从上而下排列下来，然后通过display来控制页面的显示，但是因为 transition和display两个人好像水火不容，导致了许多bug，查阅各大资料====传送门====才了解到其中的奥秘！

二、手指翻页

代码直接上

$(".index").on("touchstart", (e) => {
   
            // e.preventDefault();
            this.startX = e.originalEvent.changedTouches[0].pageX,
                this.startY = e.originalEvent.changedTouches[0].pageY;
        });
$(".index").on("touchmove", (e) => {
   
            // e.preventDefault();
            console.log(e.originalEvent)
            console.log(e.originalEvent.changedTouches[0])
            this.moveEndX = e.originalEvent.changedTouches[0].pageX
            this.moveEndY = e.originalEvent.changedTouches[0].pageY
            let X = this.moveEndX - this.startX
            let Y = this.moveEndY - this.startY;

            if (Math.abs(X) > Math.abs(Y) && X > 0) {
   
                // alert("left 2 right");
            } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
   
                // alert("right 2 left");
            } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {