jQuery动画和过渡冲突 - firefox答案

【问题标题】：jQuery animate and transition conflict - firefoxjQuery动画和过渡冲突 - firefox
【发布时间】：2012-05-22 08:05:46
【问题描述】：

添加css属性：

-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;

使只有 firefox（版本 12）对 jquery.animate() 有不同的行为

看看点击这两张图片的区别：http://jsfiddle.net/6Yj2f/1/

对这种行为有解释吗？

【问题讨论】：

标签： jquery firefox jquery-animate transition

【解决方案1】：

我已经在 chrome 21 和 firefox 13 上进行了尝试，但我想所有其他浏览器都会有所不同，我想我会这样。

您在这里拥有的是 两个缓和“动画”的总和，这就是您遇到问题的原因，这是因为 jQuery 通过内联样式逐渐更改宽度样式（其中 XX 更改为时间）：

<img id="conflicted" class="handCard" src="https://path/to/image.jpg" style="display: inline-block; width: XXpx; ">

所以，你正在做一个 5 秒的过渡，只是逐渐改变对象的宽度样式，如果你没有设置 CSS 过渡，这很好，因为浏览器不会应用它自己的过渡。但是，当您逐渐更改宽度样式同时还具有 CSS 过渡缓动（在您的情况下设置为 1 秒线性缓动）时，您正在使浏览器缓和宽度样式的每次更改。如果你将 CSS transition ease 设置为 0.1，你会看到 jQuery 如何改变宽度样式，浏览器也会改变它，几乎是同时发生的。

我发现了一些有趣的"enhaced $.animation()"，声称“扩展 $.animate() 以检测 Webkit、Mozilla 和 Opera 的 CSS 过渡并自动转换动画。兼容 IE6+”，我自己没有尝试过，但希望你会觉得很有用。

【讨论】：

谢谢，我不知道 .animate() 也会激活 CSS 过渡。