jquery - CSS3 过渡 + jQuery : translations of the x-axis have different results in different browsers for two different items

Question

Codepen :(对于那些想直接进入的人来说，这是一个代码笔。在 Chrome 和 IE 中尝试一下，看看结果的不同)

我正在尝试使用 css3 转换/过渡，因为它们比 jquery 效果更流畅。

我有一个网站的移动版本，顶部有一个固定栏，上面有 Logo 和导航图标。单击或触摸导航图标时，左侧导航栏会弹出。

这就是 css3 的用武之地。我有一个单独使用 jQuery 的此功能的工作版本，但动画在手机上确实不稳定。我下载了 jQuery transit 插件，它基本上将 css3 transitions 集成到 jQuery 中，就好像它们是动画一样(但这不是重点——我不认为问题出在这里)。

对于 css3 版本，当我使用 x: [some amount] 移动内容主体和固定 header 时，不同浏览器的转换显示不同。在除 IE10 之外的所有桌面浏览器中，固定 header 飞出了它应该飞出的两倍，而内容正文则向右移动了适当的量。在我的手机中，在 chrome 中， header 飞出了它应该飞出的两倍，而在默认的 Android 浏览器中却没有飞出。

更多信息:我检查了 chrome inspector，标题和内容正文都接收到相同的转换([some number]px，0)。标题嵌套在内容主体中。我认为这就是问题所在。有些浏览器会随着内容移动表头，然后再解释表头的变换。另一方面，由于位置是固定的，一些浏览器独立地解释这两个转换。

我的问题:是什么技术问题导致了这种差异？如何才能在所有现代浏览器中获得一致的结果？

Codepen :(就像我说的，在 Chrome 上它不能按预期工作，但如果你尝试 IE，它可以)

Answer 1

其背后的原因是导航栏是 #bod 元素的子元素，当 #bod 移动时导航栏也会随之移动。您还对导航栏应用了另一个过渡，它第二次重新定位了它。浏览器的不同处理是由于使用具有“固定”属性值的转换引起的。一个更简单、更适用的解决方案是在 #bod 上使用 toggleClass() 方法，用更少的代码实现你想要的。这是 codepen .CSS 添加:

#bod {
    transition: margin .5s ease-in-out;
}
#bod.menu-open {
    margin-left: 30%;
}

和更简单的js:

$("#toggle").on("touchstart mousedown", function (event) {
    event.stopImmediatePropagation();
    event.preventDefault();
    $('#bod').toggleClass('menu-open');
});