Question

Codepen :(对于那些想要直接进入的用户来说，这是一个代码。在Chrome和IE中尝试查看结果的差异）

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

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

这就是css3的用武之地。我只使用了jQuery这个功能的工作版本，但动画在手机上真的很不稳定。我下载了jQuery传输插件，它基本上将css3转换集成到jQuery中，好像它们是动画一样（但这不是重点 - 我不认为这里存在问题）。

使用css3版本，当我使用x：[some amount]移动我的内容正文和我的固定标题时，转换对于不同的浏览器显示不同。在除IE10之外的每个桌面浏览器中，固定标题飞出的应该是它应该的两倍，而内容正文向右移动了正确的数量。在我的手机中，在Chrome中，标题会在默认的Android浏览器中没有达到应有的效果。但

更多信息：我检查了chrome检查器，标题和内容正在接收相同的转换（[某个数字] 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');
});

CSS3 Transitions + jQuery：x轴的翻译在两个不同的项目的不同浏览器中有不同的结果

1 个答案: