页面切换滑动过场

Zhang Xiao

• 2 min read

今天看一篇文章页面切换的文章，作者做了很多页面切换的效果，链接如下here, 作者给了我一种页面切换的思路，记录如下，其实之前总觉得所有页面应该看成一个整体来看，可是这样反而限制了一些效果的实现，而作者的基本思路是每个页面都有独立的动画，只是每两个相邻页面的各自动画要相互配合，配合是指的动画时间契合和动画形式契合，所以我就简单学习作者的代码，练习了一个demo，以加强这种思路~

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    <button id="btn">换</button>
    <div class="main">
       <div class="page page1 cur">我是第一页</div>
       <div class="page page2">我是第二页</div>
      <div class="page page3">我是第三页</div>
    </div>
</body>
</html>

html, body {
  height: 100%;
  overflow:hidden;
}
.main {
  position: relative;
  width: 100%;
  height: 100%;
}
.page {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  line-height: 50;
  text-align: center;
}

.page1 {
  background-color: red;
}

.page2 {
  background-color: green;
}

.page3 {
  background-color: blue;
}

.cur {
  visibility: visible;
}

.moveToLeft {
  animation: moveToLeft 3s ease both;
}

.moveFromRight {
  animation: moveFromRight 3s ease both; 
}

@keyframes moveToLeft {
	from {transform: translateX(0);}
	to {transform: translateX(-100%);}
}

@keyframes moveFromRight {
	from {transform: translateX(100%);}
    to {transform: translateX(0);}
}

$(function() {
  
  var isAnimating = false;
  var endPre = false;
  var endNext = false;
  
  function switchPage() {
    isAnimating = true;
    
    if($('.cur').next().length === 0) {
        $('.cur').removeClass('cur');
        $('.page1').addClass('cur');
        isAnimating = false;
        return;
    }
    
    $('.cur').addClass('moveToLeft').one('webkitAnimationEnd', function() {
      console.log('3', $(this)[0]);
      $(this).removeClass('cur moveToLeft');
      endPre = true;
      if(endNext) {
         isAnimating = false;
         endNext = false;
         endPre = false;
      }
    });
    
    
    $('.cur').next().addClass('cur moveFromRight').one('webkitAnimationEnd', function() {
      $(this).removeClass('moveFromRight');
      endNext = true;
      if(endPre) {
          isAnimating = false;
          endPre = false;
          endNext = false;
      }
    });
  }
  
  $("#btn").on('click', function() {
    !isAnimating && switchPage();
  });
  
});

其中对于webkitAnimationEnd的监听刚开始用了on，于是乎遇上了坑，就是每次对事件webkitAnimationEnd添加on的监听，监听回调都会进入到该事件的调用队列里去，也就是说我一直调用switchPage方法会给webkitAnimationEnd事件添加很多个回调，然而这不是我想要的，我只想每次调用switchPage只执行最近一次声明的回调，所以用了one方法，其实也可以在回调里用off把当次监听干掉，都可以，，，只是又踩坑了呵呵呵。。。

效果如下：

See the Pen 页面滑动切换 by Zhang Xiao (@zhang-xiao) on CodePen.

Sign up for more like this.

Enter your email
Subscribe