chrome浏览器中的CSS3过渡答案

【问题标题】：CSS3 transitions in chrome browserchrome浏览器中的CSS3过渡
【发布时间】：2013-07-15 16:14:05
【问题描述】：

我正在为 div 元素使用 css3 过渡动画。每当悬停在图表中的特定点上时，需要为 div 元素的左侧和顶部位置设置动画。请参考我们的 svg 图表。

在 chrome 中动画 div 元素时，div 位置总是从浏览器顶部开始，然后平滑过渡。每次它从浏览器顶部和动画开始。但其他浏览器工作正常。请参考下面的div元素代码。

 $(tooltipdiv).css({
                'transition-property': 'left,top',
                '-moz-transition-property': 'left,top', /* Firefox 4 */
                '-webkit-transition-property': 'left,top', /* Safari and Chrome */
                '-o-transition-property': 'left,top',
                '-webkit-transition-timing-function':'linear',
                'transition-duration': series.toolTipOptions.duration,
                '-moz-transition-duration': series.toolTipOptions.duration, /* Firefox 4 */
                '-webkit-transition-duration': series.toolTipOptions.duration, /* Safari and Chrome */
                '-o-transition-duration': series.toolTipOptions.duration /* Opera */
            });

我不希望动画从浏览器顶部开始。我该如何解决这个 chrome 浏览器？

谢谢，

湿婆

【问题讨论】：

在您的 jQuery 中，我看到您设置了属性、时间和持续时间，但不是您设置顶部和左侧位置的部分。你能发布你的那部分代码吗？
我的回答对你有帮助吗？

标签： jquery html css animation css-transitions

【解决方案1】：

要使此功能跨浏览器工作，您必须先设置好设置值transition-property、transition-timing-function 和transition-duration，然后再更改为top 或left。否则过渡不会触发。

transition-property 和 transition-timing-function 看起来都可以在 css 而不是 javascript 中设置，因为它们的值不是动态的。所以让我们把它们移到那里。您还应该为 top 和 left 提供“开始”值，这样它们也可以在 CSS 中使用。

接下来，您需要在更改top 和left 之前在css 中设置transition-duration，幸运的是我们可以通过简单的jQuery 链接来做到这一点。

DEMO

【讨论】：