4

特定のjavascript関数を実行した後、そのcss変換値を次のようにするこの要素があります:

-webkit-transform : translateX(25px) translateY(25px) scale(1);

次の形式でJavaScriptを介してその値を取得するにはどうすればよいですか

"translateX(25px) translateY(25px) scale(1)"?

私が本当に達成したいのは、マウス入力に " rotate(360deg)" を追加したいということです。現在の変換値を把握できれば、これを達成できると思います。

:hover 疑似クラスは、の現在の値によって上書きされるため、トリックを実行しません-webkit-transform

編集：

これは実際に私が行っているプラ​​グイン用であることを忘れていました。変換値は、html データ属性を介して設定され、jQuery の を介して抽出されます.data()。

4

2 に答える 2

0

スクリプトによって計算されずに値が固定されている場合は、css 形式の javascript を保持することをお勧めします。そのため、スクリプトでアニメーション値をハードコーディングする代わりに、いくつかの css ルールを作成するだけで済みます。

.transformed {
  -webkit-transform: translateX(25px) translateY(25px) scale(1);
}
.transformed:hover {
  -webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg);
}

.transformed最初のスクリプトの実行後、クラスを要素に追加するだけです。
次に:hover、このタスクに JavaScript を使用する必要なく、疑似クラスの作業をそのままにしておくことができます。

それ以外の場合でも、360degローテーションを維持する必要がある場合mouseleaveは、最後のルールを次のように変更します。

.transformed.mouseenter {
  -webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg);
}

そしてmouseenterイベントで.mouseenterクラスを追加するだけです。

于 2013-05-02T08:01:39.197 に答える