1

スパンでラップされたテキストに CSS3 アニメーションを適用しようとしています。

要素がアニメーション化されたクラスとアニメーション名のクラスを持つ場合に機能します。

このアニメーションはクリック時に発生し、click() 関数内にあるため、jQuery を使用してこれらのクラスを追加しています。また、アニメーションを機能させるためにクラスが存在できるのは 1 回だけであるため、追加する前にクラスを削除します。

これまで何度もこれを行ってきましたが、スパンでラップされたテキストで試してみると、何らかの理由で機能しません。

jQuery は、開発者ツールのように機能しているように見えますが、クリックするとクラスが追加および削除されますが、アニメーションは行われません。

ここに私のjQueryコードがあります:

$(document).ready(function(){
    $('.I').click(function(){
            $(this).removeClass('animated').removeClass('wiggle').addClass('animated').addClass('wiggle');
    });
});

アニメーション用の CSS は次のとおりです。

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes wiggle {
0% { -webkit-transform: skewX(9deg); }
10% { -webkit-transform: skewX(-8deg); }
20% { -webkit-transform: skewX(7deg); }
30% { -webkit-transform: skewX(-6deg); }
40% { -webkit-transform: skewX(5deg); }
50% { -webkit-transform: skewX(-4deg); }
60% { -webkit-transform: skewX(3deg); }
70% { -webkit-transform: skewX(-2deg); }
80% { -webkit-transform: skewX(1deg); }
90% { -webkit-transform: skewX(0deg); }
100% { -webkit-transform: skewX(0deg); }
}

@-moz-keyframes wiggle {
    0% { -moz-transform: skewX(9deg); }
    10% { -moz-transform: skewX(-8deg); }
    20% { -moz-transform: skewX(7deg); }
    30% { -moz-transform: skewX(-6deg); }
    40% { -moz-transform: skewX(5deg); }
    50% { -moz-transform: skewX(-4deg); }
    60% { -moz-transform: skewX(3deg); }
    70% { -moz-transform: skewX(-2deg); }
    80% { -moz-transform: skewX(1deg); }
    90% { -moz-transform: skewX(0deg); }
100% { -moz-transform: skewX(0deg); }
}

@-o-keyframes wiggle {
    0% { -o-transform: skewX(9deg); }
    10% { -o-transform: skewX(-8deg); }
    20% { -o-transform: skewX(7deg); }
    30% { -o-transform: skewX(-6deg); }
    40% { -o-transform: skewX(5deg); }
    50% { -o-transform: skewX(-4deg); }
    60% { -o-transform: skewX(3deg); }
    70% { -o-transform: skewX(-2deg); }
    80% { -o-transform: skewX(1deg); }
    90% { -o-transform: skewX(0deg); }
100% { -o-transform: skewX(0deg); }
}

@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); 
100% { transform: skewX(0deg); }
}

.wiggle {
    -webkit-animation-name: wiggle;
    -moz-animation-name: wiggle;
    -o-animation-name: wiggle;
    animation-name: wiggle;

    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

更新: 問題を再現するフィドルは次のとおりです: http://jsfiddle.net/3Ld8e/1/

4

2 に答える 2

1

スパンはインライン要素またはフロー要素であるため、位置、高さ、幅はありません。それらはその場所に従って流れるだけです。

スパンを変更してみてください

display: inline-block

これにより、各スパンに独自のサイズ属性を持たせ、アニメーション化できるようになります。

また、css クラスを削除して再度追加するときに、ブラウザーにページを再描画させる必要があります。これは、クラスが現在追加および削除されている場合には発生しません。要素は前後でブラウザに同じように見えます。

最善の解決策は、animationendイベントをリッスンしてから (アニメーションの実行後に) クラスを削除することです。

$(document).ready(function(){

    var letters = $('.I');

    letters.on('animationend oanimationend webkitAnimationEnd', function () {
        $(this).removeClass('animated wiggle');
    });

    letters.on('click', function(){
        $(this).addClass('animated wiggle');
    });
});

更新された JSFiddle はこちら: http://jsfiddle.net/thefrontender/3Ld8e/3/

于 2013-04-14T00:10:34.727 に答える
0

アニメーションの CSS の先頭にクラス セレクターがありません。今はアニメーションクラスの要素bazingaにアニメーションを適用しています。

于 2013-04-15T03:51:08.200 に答える