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

今天運(yùn)營給了一個(gè)需求，要做個(gè)引導(dǎo)頁，也就是全屏滾動(dòng)?？紤]到只有3張圖，就自己碼個(gè)吧！說干就干。

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

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

每次滾動(dòng)時(shí)候通過css的transform屬性進(jìn)行偏移，并結(jié)合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是用來滾動(dòng)內(nèi)容的，所以在頁面進(jìn)入的時(shí)候要獲取用戶區(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動(dòng)多次滾動(dòng)，需要通過一個(gè)變量來控制是否滾動(dòng)，這里的動(dòng)畫是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);
    }
};
// 滾動(dòng)事件綁定
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)完成，在瀏覽器中運(yùn)行也幾乎完美！但是我們是一家千牛應(yīng)用，在千牛里面運(yùn)行，看似不錯(cuò)，但是鼠標(biāo)快速移動(dòng)就會(huì)出現(xiàn)閃屏、多滾動(dòng)問題。

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

不采用css動(dòng)畫，采用jquery動(dòng)畫。改變top值。
也嘗試了這個(gè)方案，選擇800毫秒效果相對(duì)最佳。

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

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

最終結(jié)果了滾動(dòng)出現(xiàn)的問題，再查看每次滾動(dòng)時(shí)間

end 1.022
end 1.055
end 2.344
end 2.273

在chrome里面查看滾動(dòng)時(shí)間

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

從結(jié)果來看在chrome里面css動(dòng)畫幾乎沒有延遲的跟設(shè)定1s過渡時(shí)間基本吻合，但是在千牛應(yīng)用里面能夠看出css動(dòng)畫會(huì)受其他條件影響，比如上面所遇到的鼠標(biāo)滾動(dòng)過快等因素。

所以在css動(dòng)畫這方面就應(yīng)該用css動(dòng)畫事件來控制。除了過渡有且只有webkitTransitionEnd事件，動(dòng)畫開始webkitAnimationStart，動(dòng)畫結(jié)束事件webkitAnimationEnd，動(dòng)畫重復(fù)運(yùn)動(dòng)事件 webkitAnimationIteration。后面再玩玩
演示地址

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