CSStransition 製做全屏頁面滾動幻燈片

最近看到網上的一些頁面效果，主要能夠用於後續切換頁面時使用，就本身動手製做一個

思路流程：

• css 設置類面設置transition transform：translateX（100%）屬性設置DOM屬性 動畫效果
• 監聽頁面鼠標滑動事件，鍵盤點擊事件，鼠標點擊事件
• 瀏覽器兼容性測試，效果事件測試

css效果主要設置切換時，新增類名【active】設置移入移出時的transfrom 時X軸的移動距離，100% / -100%

.page.active {
  z-index: 5;
  transition: opacity .7s, z-index 0s .7s, -webkit-transform .7s;
  transition: transform .7s, opacity .7s, z-index 0s .7s;
  transition: transform .7s, opacity .7s, z-index 0s .7s, -webkit-transform .7s;
}

.page.active .half {
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
  transition: -webkit-transform .7s ease-out;
  transition: transform .7s ease-out;
  transition: transform .7s ease-out, -webkit-transform .7s ease-out;
}

.page.previous {
  opacity: 0.4 !important;
  visibility: visible !important;
  transition: opacity .7s, z-index 0s, -webkit-transform .7s;
  transition: transform .7s, opacity .7s, z-index 0s;
  transition: transform .7s, opacity .7s, z-index 0s, -webkit-transform .7s;
}

.page.small {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0;
}

.page.small .half {
  -webkit-transform: translateX(0) !important;
  transform: translateX(0) !important;
}

.page:nth-child(2) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(2) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(3) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(3) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(4) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(4) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(5) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(5) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(6) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(6) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(7) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(7) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(8) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(8) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(9) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(9) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.page:nth-child(10) .left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.page:nth-child(10) .right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

jq 實現切換過程

function pagination(page, movingUp) {
    scrolling = true;
    var diff = curPage - page,
        oldPage = curPage;
    curPage = page;
    $(".page").removeClass("active small previous");
    $(".page-" + page).addClass("active");
    $(".nav-btn").removeClass("active");
    $(".nav-page" + page).addClass("active");
    if (page > 1) {
      $(".page-" + (page - 1)).addClass("previous");
      if (movingUp) {
        $(".page-" + (page - 1)).hide();
        var hackPage = page;
        setTimeout(function() {
          $(".page-" + (hackPage - 1)).show();
        }, 600);
      }
      while (--page) {
        $(".page-" + page).addClass("small");
      }
    }
    console.log(diff)
    if (diff > 1) {
      for (var j = page + 1; j < oldPage; j++) {
        $(".page-" + j + " .half").css("transition", "transform .7s ease-out");
      }
    }
    setTimeout(function() {
      scrolling = false;
      $(".page .half").attr("style", "");
      $(".page")
    }, 700);
  }
  
  
   function navigateUp() {
    if (curPage > 1) {
      curPage--;
      pagination(curPage, true);
    }
  }

  function navigateDown() {
    if (curPage < pages) {
      curPage++;
      pagination(curPage);
    }
  }

監聽頁面的點擊事件，鼠標滾動事件，鍵盤點擊事件
【注：取消默認屬性】

$(document).on("mousewheel DOMMouseScroll", function(e) {
    if (!scrolling) {
      if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
        navigateUp();
      } else { 
        navigateDown();
      }
    }
  });
  
  $(document).on("click", ".scroll-btn", function() {
    if (scrolling) return;
    if ($(this).hasClass("up")) {
      navigateUp();
    } else {
      navigateDown();
    }
  });
  
  $(document).on("keydown", function(e) {
    if (scrolling) return;
    if (e.which === 38) {
      navigateUp();
    } else if (e.which === 40) {
      navigateDown();
    }
  });
  
  $(document).on("click", ".nav-btn:not(.active)", function() {
    if (scrolling) return;
    pagination(+$(this).attr("data-target"));
  });

測試：
在鼠標鍵盤切換，點擊切換過程當中未發現切換不流暢的事件發生，可是因使用絕對定位的緣由，未適配手機端，

總結：動畫效果實現主要採用了css transfrom 實現，而且使用監聽jqDOM屬性的改變，實現動畫效果切換，手機端須在最外的DOM層設置相對定位，保證適配手機端

github地址：https://github.com/panpanxiong3/Front-end-effect-link/tree/master/js/全屏頁面滾動幻燈片背景切換