首页 > 在移动端做一个页面滑动时transition失效

在移动端做一个页面滑动时transition失效

我要一个div滑动时判断滑动距离超过一个值则translateY(-100%),否则translateY(0%),可是在手机浏览器里translateY(0%)的动画是3S内缓慢执行的,而translateY(-100%)则是瞬间完成的,请问这是什么问题?
在谷歌手机模拟器上运行是正常的

"touchmove":function(e){
            moveY=e.originalEvent.targetTouches[0].pageY;
            // console.log(startY+".."+moveY);
            if(flag1){
                if(startY>moveY){
                    e.preventDefault();
                    $(".d_content2").css({
                        "-webkit-transition":"none",
                        "-webkit-transform":"translateY("+(moveY-startY)+"px)"
                    })  
                }
            }
        },
        "touchend":function(e){
            endY=e.originalEvent.changedTouches[0].pageY; 
            if(flag1){
                if(startY-endY>=100){
                    $(".d_content2").css({
                        "-webkit-transition":"-webkit-transform 3s linear",
                        "-webkit-transform":"translateY(-100%)"
                    });
                }else{
                    $(".d_content2").css({
                        "-webkit-transition":"-webkit-transform 3s linear",
                        "-webkit-transform":"translateY(0)"
                    })  
                }
            }
        } 

我也碰到了类似的问题,在手机上第一张照片有效果,而其他照片在end事件结束后都是瞬间移动。请问最后这个问题解决了吗?


不能用-100%;需要用具体的数值

【热门文章】
【热门文章】