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类,控制动画显示;
————————————————————————————————————
一段时间没测试出来,群里一个哥们解决了,记录一下。
当左边隐藏的元素动态显示时,箭头所指的灰色部分就是占位。
解决的方案:
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", "");
});