0

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

谢谢，

湿婆

4

1 回答 1

0

要使此功能跨浏览器工作，您必须具有设置值transition-property，transition-timing-function并transition-duration在更改topor之前将其设置好left。否则过渡不会触发。

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

接下来，您需要transition-duration在更改之前设置 in css top，left幸运的是，我们可以使用简单的 jQuery 链接来完成此操作。

演示

于 2013-07-15T16:32:58.270 回答