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-propertytransition-timing-functiontransition-duration在更改topor之前将其设置好left。否则过渡不会触发。

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

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

演示

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