1

今、私は本当にシンプルなものをまとめ、そこから学び、より大きなプロジェクトに取り入れようとしています.

css webkit アニメーションと翻訳機能 (iOS ハードウェアアクセラレーションの目的) を使用して、ある位置から別の位置に移動しようとしている単純なボックスがあります。弧を描いて移動し、弧の上部に留まる必要があります。

今、私はCSSトランジションにかなり慣れていません。過去に jQuery アニメーションを使用したことがありますが、モバイル デバイスでの実行が非常に遅いようです。これらのアニメーションを設定および管理するために、ここに組み込むことができるいくつかのベスト プラクティスのアイデアがおそらくあることはわかっていますが、私は行っているうちにそれらを理解しています.

現在、ボックスは完全に上に移動し、開始位置に戻ります。どうすればそこにとどまることができますか？

http://cs.sandbox.millennialmedia.com/~tkirchner/rich/M/march_madness/tmp/

<style type="text/css">

#ball {
    display:block;
    position: absolute;
    width: 50px;
    height: 50px;
    overflow: hidden;
    top: 500px;
    left: 100px;
    background-color: red;  
} #action {
    display: block;
    font-weight:bold;
}

.animation {
    -webkit-animation-name:  throwBall;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes throwBall {
    from { -webkit-transform: translate( 0px, 0px ); }
    25% { -webkit-transform: translate( 75px, -25px ) }
    50% { -webkit-transform: translate( 150px, -75px ) }
    75% { -webkit-transform: translate( 225px, -150px ) }
    to { -webkit-transform: translate( 300px, -300px ); }
}


</style>

<script type="text/javascript">
    if ( typeof(jQuery) == 'undefined' ) document.write('<scri'+ 'pt type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></scri'+'pt>');
</script>

<a id='action'>Animate Me</a>

<div id='ball'></div>

<script type="text/javascript">
$(document).ready(function(){
    $('#action').bind('click',function(){
        $('#ball').addClass('animation').bind('webkitAnimationEnd',function(){
        });
    });
});
</script>
4

1 に答える 1

3

アニメーションによって設定されたプロパティはアニメーションの終了時に削除されるため、アニメーションの終了状態をクラスに追加するだけです。クラスに追加-webkit-transform: translate(300px, -300px);するとanimation、問題が修正されます。

.animation {
    -webkit-animation-name:  throwBall;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform: translate(300px, -300px); 
}
于 2011-02-18T20:04:29.577 に答える