jquery - Chrome 浏览器中的 CSS3 转换

Question

我正在为 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 浏览器？

谢谢，

湿婆

Answer 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