0

div 要素に css3 トランジション アニメーションを使用しています。チャートの特定のポイントにカーソルを合わせるたびに、div 要素の左と上の位置をアニメーション化する必要があります。SVG チャートを参照してください。

ここに画像の説明を入力

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

ブラウザーの上部からアニメーションを開始したくありません。このクロムブラウザを解決するにはどうすればよいですか?

ありがとう、

シヴァ

4

1 に答える 1

0

これをクロスブラウザで機能させるには、またはに変更を加える前に、設定値transition-propertyを用意しておく必要があります。そうしないと、トランジションは発生しません。transition-timing-functiontransition-durationtopleft

transition-propertyどちらも、transition-timing-function値が動的ではないため、javascript ではなく css で設定できるように見えます。それでは、それらをそこに移動させましょう。topおよびの「開始」値も提供する必要がありますleft。そうすれば、それらは CSS でも使用できます。

transition-duration次に、変更する前に css でを設定する必要があります。幸いなことtopにleft、単純な jQuery チェーンでこれを行うことができます。

デモ

于 2013-07-15T16:32:58.270 に答える