jquery - jQuery animate and transition conflict - firefox

Question

adding css properties:

-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;

makes only firefox (version 12) act differently on jquery.animate()

just see the difference between clicking the two images on: http://jsfiddle.net/6Yj2f/1/

is there is an explanation to this behavior?

Answer 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 如何改变宽度样式，浏览器也会改变它，几乎是同时发生的。

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