1

属性の計算されたスタイルが要素のスタイルとは異なる値を持つという不可解な問題に遭遇しました。

私の状況を説明する最初の言葉

要素の background-color プロパティをアニメーション化しています。アニメーションが終了したら、計算された bgcolor 値を取得し、要素のスタイルに適用します。これはうまくいきます

ただし、ここで bgcolor を変更しようとしても、開発者ツールが報告するように、値は実際に要素に設定されていますが、何も起こりません。

この時点で、(ブラウザーの開発者ツールを使用して) スタイルと計算されたスタイルを切り替えると、2 が報告するものとの間に矛盾が生じ、もちろん計算されたスタイルが優先されます。

http://jsfiddle.net/d2S3d/14/の状況を示す fiddle のテスト スクリプトを作成しました。

いくつかのサンプル css も添付すると、stackoverflow が原因で、それなしでは投稿を送信できません

.animate{ アニメーション名: bg_kf; アニメーション期間: 5 秒。アニメーションタイミング関数: 線形; アニメーション遅延: 0 秒; アニメーション反復回数: 1; アニメーション塗りつぶしモード: 転送; アニメーション方向: 通常;

    -webkit-animation-name: bg_kf;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-direction: normal;

    -moz-animation-name: bg_kf;
    -moz-animation-duration: 5s;
    -moz-animation-timing-function: linear;
    -moz-animation-delay: 0s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-direction: normal;

    -o-animation-name: bg_kf;
    -o-animation-duration: 5s;
    -o-animation-timing-function: linear;
    -o-animation-delay: 0s;
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
    -o-animation-direction: normal;
}

@keyframes bg_kf {
    from {background-color:#FFFFFF}
    to {background-color:red}
}

@-moz-keyframes bg_kf {
    from {background-color:#FFFFFF}
    to {background-color:red}
}

@-webkit-keyframes bg_kf {
    from {background-color:#FFFFFF}
    to {background-color:rgba(255, 140, 74, 0.16)}
}

@-o-keyframes bg_kf {
    from {background-color:#FFFFFF}
    to {background-color:rgba(255, 140, 74, 0.16)}
}

よろしくお願いします

4

2 に答える 2

2

ここでの問題は.animate、実際のインライン スタイル ルールの指定に関係なく、 で定義したアニメーション プロパティが背景色を赤のままにすることです。これが、インライン スタイルを切り替えても効果がないように見える理由です。

インライン スタイルを適用した直後にクラスを削除する.animateと、すべてが再び正常に戻ります。

$("#sample").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
    var computedBg = $(this).css('background-color');
    $(this).css('background-color', computedBg);
    $(this).removeClass('animate');
});

ここにデモがあります (アニメーションが完了した後にボタンをクリックしてみてください): http://jsfiddle.net/vcfDj/

于 2012-12-18T11:11:36.950 に答える
0

animation-fill-mode を「forwards」に設定しました。その効果は、アニメーションが終了したときの値でアニメーション化された CSS プロパティを保持することです (他のスタイル設定に関係なく)。「なし」に設定すると、問題が解決します。

于 2013-06-02T09:40:46.690 に答える