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", "");
});