14

序文

aがtodivからアニメーション化され、アニメーションが終了した後もi を保持したいとします。opacity:0;opacity:1;opacity:1;

それanimation-fill-mode:forwards;がそうです。

@keyframes myAnimation {
    from { opacity:0; }
    to { opacity:1; }
}
div {
    opacity:0;
    animation-name:myAnimation;
    animation-delay:1s;
    animation-duration:2s;
    animation-fill-mode:forwards;
}​
<div>just a test</div>​

jsFiddle で実行する

  • 注 1: 簡単にするために、ここではベンダー プレフィックスを含めませんでした
  • 注2：これは一例です。「jQueryのfadeIn関数を使うだけ」などと回答しないでください。

知っておくべきこと

この回答animation-fill-modeでは、Chrome 16 以降、Safari 4 以降、Firefox 5 以降でサポートされていることを読みました。

ただし、 Chrome 1+ と Operaでもanimation単独でサポートされています。そのため、 Modernizrを使用した一般的なテストでfill-modeは、サポートされていない場合でも肯定的な結果が返されることがあります。

ターゲットにするためanimation-fill-modeに、Modernizr に新しいテストを追加しました。

Modernizr.addTest('animation-fill-mode',function(){
    return Modernizr.testAllProps('animationFillMode');
});

これ.no-animation-fill-modeで、CSS とModernizr.animationFillModeJavaScript のクラスが作成されました。

また、 CSS3 アニメーション仕様から次のことを読みました。

ドキュメント スタイル シートで指定されたアニメーションは、ドキュメントの読み込み時に開始されます。

最後に、質問

アニメーションが終了する正確な秒数で単純な jQuery 関数を実行しても問題ありませんか

$(document).ready(function(){
    if(!Modernizr.animation){
        $('div').delay(1000).fadeIn(2000);
    }else if(!Modernizr.animationFillMode){
        $('div').delay(3000).show();
    }
});

そしてCSSで：

.no-animation-fill-mode div {
    animation-iteration-count:1;
}
/* or just animation:myAnimation 2s 1s 1; for everyone */

または、特定の既知のポリフィルはありますanimation-fill-modeか?

また、短縮構文を使用するとどうなりますか

animation:myAnimation 2s 1s forwards;

animationをサポートしているがサポートしていないブラウザではanimation-fill-mode？

どうもありがとう！

4

3 に答える 3

6

それが私だったら、可能であれば、より単純な代替手段を選択してみます。一般的に受け入れられているものだけを使用するように、実装をダウングレードします。後で、機能がより広くサポートされるようになったら、実装を検討します。ドキュメントページでブロードキャストされている機能を使用することはめったに考えThis is an experimental technologyませんが、退屈だと分類されるべきかもしれません:)

あなたの例ではanimation-fill-mode:forwards、最初に要素の終了状態を定義し、連鎖アニメーションを使用するのと同じ結果を得ることができます(アクションの前に遅延が必要な場合) :

@keyframes waitandhide {
  from { opacity:0; }
  to { opacity:0; }
}
@keyframes show {
  from { opacity:0; }
  to { opacity:1; }
}
div {
  opacity:1;
  animation: waitandhide 2s 0s, show 2s 2s;
}
<div>just a test</div>​

http://jsfiddle.net/RMJ8s/1/

ブラウザが遅いと、要素の初期状態が再び非表示になる前にフラッシュされる可能性があります。しかし、私の経験では、これは非常に古いマシンと、レンダリングする css が大量にあるページでしか見たことがありません。

明らかに、上記は css をもう少し膨らませます(スタイルを複製する必要があるため)。複雑なアニメーションを扱う場合は、より複雑になります。でも：

  1. ほぼすべてのアニメーション状況で機能するはずです。
  2. JavaScript の必要性を回避します( $().fadeIn フォールバックのために保存します)。
  3. CSS アニメーションをサポートするすべてのブラウザーで動作します。
  4. JS と CSS が同期されない/同期されなくなるリスクはありません。

短い形式の使用に関しては、ブラウザの互換性をできるだけ広くしたい場合は、使用しない方がよいでしょう。ただし、上記の例で示したように、短い形式を使用することを選択しました。その理由は、短い形式の方が明確であり、長々としたバージョンを常に書きたくない(または読みたくない)ことを理解できるからです。このため、less を使用して CSS を生成することをお勧めします。

http://lesscss.org/

http://radiatingstar.com/css-keyframes-animations-with-less

于 2012-09-25T23:21:16.260 に答える
2

ポリフィルについてはわかりません...しかし、実際には独自のカスタムModernizrテストを使用する必要があります。アニメーションの塗りつぶしモードをサポートしていないブラウザーの場合は、animationEndイベントを使用してコールバックをトリガーし、不透明度を設定する必要があります。 1に（またはクラスを削除します）。

参照：CSS3遷移イベント

省略表記に関しては、IE <10はanimation-fill-modeプロパティをサポートしておらず、宣言全体を壊してしまうと確信しています。

于 2012-09-23T16:30:16.767 に答える
0

参考までに、最近pebblの回答（非常に賢い回答です）を実装する方法を次に示します。Modernizrの css-animation 検出だけが必要です。

このdivをスライドしてフェードしたいとしましょう：

<div class="target">Some stuff</div>

まず、アニメーションを書き留めますベンダープレフィックス付き

@keyframes byebye {
    0% { height:100px; opacity:1; }
    100% { opacity:0; height:0; }
}

その後、新しいクラス

.target-animation {
    height:0; opacity:0; // same as "100%" state
    animation:byebye 750ms 1;
}

JavaScript に移行:

// $('.whatever').on('click',function(){ ...

if(Modernizr.cssanimations)
    // css animations are supported!
    $('.target').addClass('target-animation');
else
    // i hate you IE
    $('.target').animate({height:0,opacity:0},750);

デモ

アニメーションを複数回トリガーする必要がある場合は、ここで説明されているように、javascript を使用してクラスを削除するだけです。

// if(Modernizr.cssanimations) ...

$('target').addClass('target-animation').on('webkitAnimationEnd oAnimationEnd oanimationend animationend msAnimationEnd',function(){
    $(this).removeClass('target-animation')
    // don't forget to  .hide()  if needed
});

// ... else
于 2013-04-26T21:59:55.923 に答える