Question

所以我创建了一个网站，没什么特别的，只是学习JavaScript的工作方式。

在桌面上，它的效果非常好。当我让我的JavaScript看起来像这样

function menu(){
menuButton = document.getElementById('button_menu');
nav = document.getElementById('menu');
content = document.getElementById('content');

if (menuButton.classList != 'active'){
    //Then Move Content and Nav
    menuButton.classList.add('active');

    content.classList.remove('moveContentBack');
    content.classList.add('moveContent');

    nav.classList.remove('moveNavBack');
    nav.classList.add('moveNav');
}
else{
    menuButton.classList.remove('active');

    content.classList.remove('moveContent');
    content.classList.add('moveContentBack');

    nav.classList.remove('moveNav');
    nav.classList.add('moveNavBack');

}
}

在移动上，代码效果更好。

function menu(){
menuButton = document.getElementById('button_menu');
nav = document.getElementById('menu');
content = document.getElementById('content');

if (menuButton.classList != 'active'){
    //Then Move Content and Nav
    menuButton.classList.add('active');

    content.style.webkitTransform = "translate3d(200px, 0px, 0)";
    nav.style.webkitTransform = "translate3d(0px, 0px, 0)";
}
else{
    menuButton.classList.remove('active');

    content.style.webkitTransform = "translate3d(0px, 0px, 0)";
    nav.style.webkitTransform = "translate3d(-100px, 0px, 0)";
}
}

我真的很喜欢桌面

由于某种原因，它根本不起作用。如果您想预览我的网站，请查看它的工作原理（在手机和桌面上），请查看skarchmittest2.tumblr.com

我知道我可以让它变得普及，并使其成为简单的过渡，但我添加了这些类以使它有点弹跳。

.active{
background: red !important;
}
.moveContent{
-webkit-animation: moveContentBounce .5s;
animation: moveContentBounce .5s;
/*-webkit-transform: translate3d(200px, 0px, 0) !important;*/
}
.moveContentBack{
-webkit-animation: moveContentBackBounce .5s;
animation: moveContentBackBounce .5s;
/*-webkit-transform: translate3d(0px, 0px, 0) !important;*/
}
.moveNav{
-webkit-animation: moveNav .5s;
animation: moveNav .5s;
/*-webkit-transform: translate3d(0px, 0px, 0) !important;*/
}
.moveNavBack{
-webkit-animation: moveNavBack .5s;
animation: moveNavBack .5s;
/*-webkit-transform: translate3d(-100px, 0px, 0)!important;*/
}

@-webkit-keyframes moveContentBounce{
0%{-webkit-transform: translate3d(0px, 0px, 0);}
50%{-webkit-transform: translate3d(230px, 0px, 0);}
 100%{-webkit-transform: translate3d(200px, 0px, 0);}
}

@-webkit-keyframes moveContentBackBounce{
0%{-webkit-transform: translate3d(200px, 0px, 0);}
20%{-webkit-transform: translate3d(210px, 0px, 0);}
100%{-webkit-transform: translate3d(0px, 0px, 0);}
 }

@-webkit-keyframes moveContent{
0%{-webkit-transform: translate3d(0px, 0px, 0);}
/*50%{-webkit-transform: translate3d(100px, 0px, 0);}*/
100%{-webkit-transform: translate3d(200px, 0px, 0);}
 }

@-webkit-keyframes moveContentBack{
0%{-webkit-transform: translate3d(200px, 0px, 0);}
/*50%{-webkit-transform: translate3d(100px, 0px, 0);}*/
100%{-webkit-transform: translate3d(0px, 0px, 0);}
}

@-webkit-keyframes moveNav{
0%{-webkit-transform: translate3d(-100px, 0px, 0);}
100%{-webkit-transform: translate3d(0px, 0px, 0);}
}
@-webkit-keyframes moveNavBack{
0%{-webkit-transform: translate3d(0px, 0px, 0);}
100%{-webkit-transform: translate3d(-100px, 0px, 0);}
}

以及这些对象的原始状态

 #content{
    z-index: 100;
    background: white;
    position: absolute;
    transition: 0.2s ease-out;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
}    
nav#menu{
position: absolute;
min-height: 100vh;
width: 300px;
background: gray;
-webkit-transform: translate3d(-100px, 0px, 0);
}

有一些注释掉的代码，这就是我试图让它在桌面上普遍运行。

基本上，我不确定为什么-webkit-transform CSS PROPERTY 在iOS上不起作用，而是使用JavaScript和.style.webkitTrasform =“”;确实。一旦我理解了这一点，我将使它与其他浏览器兼容。

Answer 1

不是100％肯定，但正如您在http://caniuse.com/#search=webkit-transform上看到的那样，对于iOS的webkit-transform只有部分支持。从那里引用：

部分支持是指缺少过滤器支持或错误导致的结果效果。 CSS过滤效果规范正在进行中替换这种方法。

所以也许你必须保持js-solution一段时间。

Answer 2

在我的javascript中，我所要做的只是添加

  window.location="#scroll"; 
  window.location="#someotherObject";

这两个对象是不可见的（不透明度：0且不可选），并且绝对位于同一位置。奇迹般有效。

代码无法在移动设备上运行

2 个答案: