1

円を形成する CSS クラスがあり、css プロパティを追加して Jquery から動的に回転させようとしています。ボタンを初めてクリックすると正常に動作し、残りの時間はアイドル状態になります。「cssAmination」関数を使ってみましたが、使い物になりません。どこが間違っているのかわかりません。このコードを修正するのを手伝ってください。前もって感謝します。

/*Circle code*/
div.circle{   
width: 300px;   
height: 300px;    
-moz-border-radius:150px; 
-webkit-border-radius: 150px;  
background:#808080; 
border-radius: 150px;
bottom: -150px;
left: -150px;
position: absolute;
}

/*rotate class*/
div.rotateCircle
{   
/* Firefox: */
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
-moz-animation-play-state: running;
}

@-moz-keyframes moveCircle
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(90deg);}
}

//Jquery code:
<script type="text/javascript">
        $(document).ready(function(){
    $("a").click(function(){
        $('div#rotateCircle').css({'-moz-animation-name':'moveCircle'});
    });
}); </script>
<body>
    <h3>Labs Project</h3>
    <div>
        <div id=rotateCircle class="circle">
            &nbsp;
        </div>
        <div id=rotateCircle class="horizontalLine">
            &nbsp;
        </div>
        <div id=rotateCircle class="verticalLine">
            &nbsp;
        </div>
        <div class="divButton">
            <table>
                <tr>
                    <td><a class="btn" href="#">HOME</a></td>
                    <td><a class="btn" href="#">Class</a></td>
                    <td><a class="btn" href="#">CV</a></td>
                    <td><a class="btn" href="#">CM</a></td>
                </tr>
            </table>
        </div>      
    </div>
</body>
4

2 に答える 2

0

アニメーションの JavaScript イベントを確認する必要があります: https://developer.mozilla.org/en/CSS/CSS_animations#Using_animation_events

基本的に、アニメーションの名前のクラスを追加しました 

#rotateCircle.rotate {
    -webkit-animation-name: moveCircle;
       -moz-animation-name: moveCircle;
         -o-animation-name: moveCircle;
            animation-name: moveCircle;
}

また、jQuery で CSS を追加する代わりに、クラスを追加して、アニメーションが終了したらanimationendイベントを使用して削除するだけです。

$(function() {
    var $rotateCircle = $('div#rotateCircle');
    $("a").click(function(){
        $rotateCircle.addClass('rotate')
        .on('animationend', function() {
            $rotateCircle.removeClass('rotate');
        });
    });
});

(見た目も少し良くしました) これが新しい作業用の fiddleです。

注意:animationendイベントは一部のブラウザーでプレフィックスが付けられます。ここに、さまざまなブラウザーをすべてサポートするために作成した要点を示します ( Modernizrが必要です)。

于 2012-06-20T17:46:38.200 に答える
0

このタスクを非常に簡単にするcss3 トランジションプロパティがあります。投稿には webkit を使用しました。それに応じてプロパティを変更します。
CSS

#rotateCircle.rotate {
    -webkit-transform: rotate(0);
    -webkit-transition: -webkit-transform 2s; //+ optional path i.e. linear
}

次に、js を使用して、css プロパティを遷移するように設定するだけで、魔法のようにそれらの設定にアニメーション化されます (この場合は変換)。

$(function() {
    var angle = 0;
    $("a").click(function(){
        angle += 90;
        $("div#rotateCircle").css("-webkit-transform", "rotate("+angle+"deg)";
    });
});

私はこのコードをテストしませんでしたが、transition プロパティは簡単に使用できます。これを学んだので、keyframes/css アニメーション プロパティはほとんど使用しなくなりました。

于 2012-06-21T14:34:43.783 に答える