鉻瀏覽器中的CSS3轉換

我使用CSS元素的css3轉換動畫。每當鼠標懸停在圖表中的特定點上時，都需要動畫div元素的左側和頂部位置。請參考我們的svg圖表。鉻瀏覽器中的CSS3轉換

enter image description here

在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 */ 
      });

我不希望動畫從瀏覽器的頂端開始。我該如何解決這個鉻瀏覽器？

感謝，

溼婆

來源

2013-07-15 SivaRajini

在你的jQuery我看你設置該屬性，時間和持續時間，但不是部分被設置在頂部和左側位置。你可以發佈你的代碼的一部分？ – Fresheyeball

我的回答對你有幫助嗎？ – Fresheyeball

對於這個工作跨瀏覽器，你必須有你做出改變，以top或left之前你設定值transition-property，transition-timing-function和transition-duration到位。否則，轉換不會觸發。

transition-property和transition-timing-function都看起來像他們可以安裝在CSS而不是JavaScript，因爲它們的值不是動態的。所以讓我們移動那裏。您還應該爲top和left提供「開始」值，以便可以使用CSS。

接下來，您需要在css中設置transition-duration，然後再更改top和left，幸運的是，我們可以通過簡單的jQuery鏈接完成此操作。

DEMO

來源

2013-07-15 16:32:58 Fresheyeball

鉻瀏覽器中的CSS3轉換

回答

相關問題