摘要：也嘗試了這個方案，選擇毫秒效果相對最佳。方案繼續(xù)思考一開始的思路為啥出現(xiàn)問題。經(jīng)過老大提醒，并結合千牛之前出現(xiàn)的動畫問題，感覺是動畫結束和控制沒有達到一致。除了過渡有且只有事件，動畫開始，動畫結束事件，動畫重復運動事件。

今天運營給了一個需求，要做個引導頁，也就是全屏滾動。考慮到只有3張圖，就自己碼個吧！說干就干。

設置一個外層container, 用戶的可見區(qū)域，也就是全屏

container內(nèi)有3個層次，每個層次大小都跟container一樣大小

每次滾動時候通過css的transform屬性進行偏移，并結合transition過渡一下效果

*{
    margin: 0;
    padding: 0;
}
.container{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    overflow: hidden;
}
.scrollContainer{
    display: none;
    transition: all ease 1s;
}
.slide1{
    background-color: rgb(27, 188, 155);
}
.slide2{
    background-color: rgb(255, 153, 0);
}
.slide3{
    background-color: rgb(123, 170, 190);
}

scrollContainer是用來滾動內(nèi)容的，所以在頁面進入的時候要獲取用戶區(qū)域

var $container = $(".container");
var $scroll = $container.find(".scrollContainer");
var height = $container.height();
var len = 3;
var current = 1;
$container.find(".slide").css("height", height + "px");
$scroll.show();

為了防止?jié)L動多次滾動，需要通過一個變量來控制是否滾動，這里的動畫是1s執(zhí)行完，使用setTimeout延遲1s后解鎖，這樣大體邏輯差不多

// page控制器
var len = 3;
var current = 1;
var page = {
    isScrolling: false,
    next: function() {
        if((current + 1) <= len) {
            current += 1;
            page.move(current);
        }
    },
    pre: function() {
        if(current -1 > 0) {
            current -= 1;
            page.move(current);
        }
    },
    move: function(index) {
        page.isScrolling = true;
        var di = -(index-1)*height + "px";
        page.start = +new Date();
        $scroll.css("transform", "translateY("+di+")");
        setTimeout(function(){
            page.isScrolling = false;
        }, 1010);
    }
};
// 滾動事件綁定
function bindMouseWheel (page) {
    var  type = "mousewheel";
    var  deltaY = 0;

    function mouseWheelHandle (event) {
        if (page.isScrolling) {// 加鎖部分
            return false;
        }
        var e = event.originalEvent || event;

        deltaY = e.deltaY;
        if (deltaY > 0) {
            page.next();
        } else if (deltaY < 0) {
            page.pre();
        }
    }
    $(document).on("mousewheel", mouseWheelHandle);
}

差不多了，大體已經(jīng)完成，在瀏覽器中運行也幾乎完美！但是我們是一家千牛應用，在千牛里面運行，看似不錯，但是鼠標快速移動就會出現(xiàn)閃屏、多滾動問題。

出現(xiàn)這個問題，第一反應是代碼寫錯了，沒有兼容瀏覽器，但是一想千牛就是chrome內(nèi)核，不需要寫兼容代碼啊！

不采用css動畫，采用jquery動畫。改變top值。
也嘗試了這個方案，選擇800毫秒效果相對最佳。

繼續(xù)思考一開始的思路為啥出現(xiàn)問題。經(jīng)過老大提醒，并結合千牛之前出現(xiàn)的css動畫問題，感覺是動畫結束和js控制沒有達到一致。為了驗證這個假設，去除setTimeout延遲，添加webkitTransitionEnd事件，并打印出每次滾動時間。

// page控制更改
 move: function(index) {
    page.isScrolling = true;
    var di = -(index-1)*height + "px";
    page.start = +new Date();
    $scroll.css("transform", "translateY("+di+")");
},
// 添加了滾動結束控制
moveEnd: function() {
    page.end = +new Date();
    console.log("end", (page.end - page.start)/1000);
    page.isScrolling = false;
}
// 給添加滾動結束事件
$scroll.on("webkitTransitionEnd", page.moveEnd);

最終結果了滾動出現(xiàn)的問題，再查看每次滾動時間

end 1.022
end 1.055
end 2.344
end 2.273

在chrome里面查看滾動時間

end 0.999
end 0.994
end 1.006
end 1.023
end 0.991
end 0.997
end 1.005
end 1.046

從結果來看在chrome里面css動畫幾乎沒有延遲的跟設定1s過渡時間基本吻合，但是在千牛應用里面能夠看出css動畫會受其他條件影響，比如上面所遇到的鼠標滾動過快等因素。

所以在css動畫這方面就應該用css動畫事件來控制。除了過渡有且只有webkitTransitionEnd事件，動畫開始webkitAnimationStart，動畫結束事件webkitAnimationEnd，動畫重復運動事件 webkitAnimationIteration。后面再玩玩
演示地址

本文原地址http://xiaoqiang730730.github.io/2016/06/03/fullpage/