10

Webkit CSS3 を使用して、左右の CSS プロパティを変更することにより、ボタンが押されたときに画面上のある場所から別の場所に絶対配置された DIV を移動しようとしています。ただし、私が見たこれを行うためのすべての例では、静的な CSS ルールを使用してこの遷移を適用しています。

事前に新しい位置がわからないので、この CSS3 トランジションを動的に適用するにはどうすればよいですか?

4

2 に答える 2

21

遷移を定義すると、要素の CSS 値をどのように変更しても適用されます。したがって、JavaScript でインライン スタイルを適用するだけで、要素がアニメーション化されます。したがって、次のような CSS を使用します。

left: 100px;
top: 100px;
-webkit-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-moz-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-o-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;

次のような機能があります。

function clickme() {
    var el = document.getElementById('mydiv');
    var left =  300;
    var top =  200;
    el.setAttribute("style","left: " + left + "px; top: " + top + "px;");
}

関数を呼び出すと、アニメーションが表示されます。left と top の値は、好きな場所から取得できます。 私は完全な例を作りました。

于 2010-06-26T19:43:24.193 に答える
0

別のオプションは、jQuery Transitを使用して絶対位置の div を左または右に移動することです。

Javascript:

$("#btnMoveRight").click( function () {
    $('#element').transition({ left: '+=50px' });
});

$("#btnMoveLeft").click( function () {
    $('#element').transition({ left: '-=50px' });
});

JS フィドルのデモ

モバイル デバイスで適切に動作し、CSS3/ブラウザーの互換性を処理します。

于 2013-03-21T13:07:36.480 に答える