javascript - div 从右侧进入视口，尽管它被放置在 android 的左侧

Question

我正在为 iOS 和 Android 制作一个带有 appgyver 类固醇的应用程序，我发现了这个奇怪的错误。尽管 div 完全位于视口的左侧，但它在 android 上从右侧进入视口，在 iOS 上它的行为与预期一样。

css

.drawer {

z-inder:100000;
position: fixed;
height: 100%;
width:80%;
margin-left: -80%;
background-color: #111111;

}

javascript

        $(document.getElementById('drawer')).animate({'margin-left': '0%'}, {queue: false});

Answer 1

您可以尝试使用 left 属性，而不是 margin-left，因为您的元素已经定位：

.drawer {

  z-inder:100000;
  position: fixed;
  height: 100%;
  width:80%;
  left: -80%;
  background-color: #111111;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

为了防止对 jQuery 的误解，我建议使用 CSS 类来制作动画而不是 animate() 方法（在移动设备上更流畅）。

你的新 CSS 类：

.drawer.onScreen {
   left: 0;
}

你的新 JS ：

$('.drawer').addClass('onScreen');

顺便说一句，请注意，当您的目标元素只有一个类时，您的旧 JS 代码使用 getELementByID。