3

ボタンをクリックするたびに、オブジェクトが一定量右に移動するアニメーションを作成したいと考えています。

たとえば、オブジェクトの初期位置が「左: 10px」で、アニメーションの 1 ループごとに 10px ずつ移動する場合、最初のクリック後は 20px に移動し、2 回目のクリック後は 30px に移動する必要があります。

どうすればいいですか？現在、CSS アニメーションは、クリックするたびにオブジェクトの最初の位置から再開するようです。

4

2 に答える 2

2

これは可能ではないと思います。少なくとも、次のようなことはできません。

@-webkit-keyframes move{
  0% {}
100% {
     -webkit-transform: translate(10px);
     }  
}

   This will not work at all.

ただし、代わりにjQueryを使用できます。非常に少ない行を使用して、アニメーションを簡単に作成できます。

$('#button').click(function() {
    $('#book').animate({
        left: '+=10'
    }, 1000, function() {
        console.log("Done.");
    });
});

ライブデモ:here

これがあなたを助けることを願っています。

追加した

したがって、アニメーション部分には CSS3 を使用する必要があります。transition次のように CSS で使用できます。

-webkit-transition:left .3s ease-in-out;

JavaScriptを使用して変更しますleft（JavaScriptはアニメーション部分には関与していません）。

ライブデモ(新規) :here

于 2012-01-01T06:31:20.880 に答える
1

CSS がアニメーションを行う非 jQuery バージョンを次に示します。アニメーションの設定leftと制御には Javascript が必要です。transition: left

デモ: http://jsfiddle.net/ThinkingStiff/UEt4Y/

脚本：

document.getElementById( 'move-me' ).addEventListener( 'click', function () {

    var move = document.getElementById( 'move' );
    move.style.left = ( move.offsetLeft + 10 ) + 'px';

}, false );

HTML:

<button id="move-me">Move</button>
<div id="move"></div>

CSS:

#move {
    background: green;
    height: 50px;
    left: 0px;
    position: absolute;
    top: 100px;
    transition:             left 250ms ease-in-out;
        -moz-transition:    left 250ms ease-in-out;
        -ms-transition:     left 250ms ease-in-out;
        -o-transition:      left 250ms ease-in-out;
        -webkit-transition: left 250ms ease-in-out;
    width: 50px;
}
于 2012-01-02T01:53:31.873 に答える