关于CSS3动画占位问题

2015年5月19号更新：
第二种方法：

 /*滑动view*/
.scrollView{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f4f4f4;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    -webkit-transition: -webkit-transform .2s cubic-bezier(0,0,.25,1);
    transition: transform .2s cubic-bezier(0,0,.25,1);
    display: none;
}
.show{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

使用fixed进行定位，通过css的增加和删除show类，控制动画显示；
————————————————————————————————————
一段时间没测试出来，群里一个哥们解决了，记录一下。

zhanwei.png

当左边隐藏的元素动态显示时，箭头所指的灰色部分就是占位。

解决的方案：

html,body{
    overflow: hidden;
}
body{
    position: absolute;
    left: 0;
    background: white;
}

动画实现：

/***触发显示***/抄淘宝的，哈哈
$(".show_choice").css({
    "position":"absolute",
    "top":"0",
    "left":"100%",
    "height":"100%",
    "width":"100%",
    "z-index":"11",
    "-webkit-transform": "translate3d(0,0,0)"
});
$(".show_choice").removeClass("none").animate({
        translateX: "-100%"
}, 300, "ease-out", function() {
        window.scrollTo(0, 0);
        $("#main").addClass("none");
        $(".show_choice").attr("style", "");
});
/***触发隐藏***/
$("#main").removeClass("none");
$(".show_choice").css({
        "position":"absolute",
        "top":"0",
        "left":"0",
        "height":"100%",
        "width":"100%",
        "z-index":"11"
    });
$(".show_choice").animate({
        translateX: "100%"
    }, 300, "ease-out", function() {
        window.scrollTo(0, 0);
        $(".show_choice").addClass("none");
        $(".show_choice").attr("style", "");
});