页面切换滑动过场

今天看一篇文章页面切换的文章,作者做了很多页面切换的效果,链接如下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.

如果我的文章对您有帮助
欢迎打赏(。・ω・)

Zhang Xiao

Read more posts by this author.

beijing