9

jQuery ベースの CSS プロパティの変更後に jQuery を介して適用された CSS3 トランジション ルールが、実際にこのプロパティの変更をアニメーション化するという事実に驚いています。http://jsfiddle.net/zwatf/3/をご覧ください。

最初に、div は 2 つのクラスによってスタイル設定され、これら 2 つのクラスのデフォルトの CSS プロパティにより特定の高さ (200px) を持ちます。次に、1 つのクラスを削除して、jQuery で高さを変更します。

$('.container').removeClass('active');

これにより、高さが 200px から 15px に減少します。

その後、クラスの追加によってコンテナに遷移ルール​​が適用されます。

$('.container').addClass('all-transition');

起こっていることは、高さの減少がアニメーション化されることです (少なくとも Firefox と Chrome では)。私の世界では、命令の順序に何らかの意味がある場合、これは発生しないはずです。

この動作は非常にうまく説明できると思います。なぜそれが起こっているのですか？どうすれば防ぐことができますか？

これは私が達成したいことです:

  1. jQuery でデフォルト スタイルを変更します (CSS3 トランジションではアニメーション化されません!)
  2. jQueryで遷移ルール​​を適用する
  3. jQuery でプロパティを変更する (CSS3 トランジションによるアニメーション)

(1) と (2) はできるだけ早く行われる必要があるため、恣意的な遅延で作業するのは好きではありません。

4

3 に答える 3

5

スクリプトを実行するとき、ブラウザは通常、不要な描画を防ぐためにDOMの変更を最後まで延期します。特定のプロパティを読み書きすることで、リフローを強制できます。

var container = $('.container').removeClass('active');
var foo = container[0].offsetWidth;  //offsetWidth makes the browser recalculate
container.addClass('all-transition');

jsFiddle

またはsetTimeout、ブラウザを自動的にリフローさせてからクラスを追加することで、基本的に同じことを行う短い期間で使用することもできます。

于 2013-03-03T14:22:16.500 に答える
5

なぜそれが起こっているのですか？

DOM はそれらが一緒に適用されていると見なすためだと思います。すぐに連続するアクションは、通常、次々に適用されるのではなくキャッシュされます。

どうすれば防ぐことができますか？

（非常に小さい）タイムアウトでそれを行う必要があります：http://jsfiddle.net/zwatf/4/

（コメントから）リフローを手動でトリガーすることも役立ちます：http://jsfiddle.net/zwatf/9/

任意の遅延で作業するのは好きではありません。

次に、他の唯一の可能な方法は、アニメーション化されたcssプロパティからを削除することだと思いheightます。つまり、アニメーション化したいものを明示的に指定する必要があります: http://jsfiddle.net/zwatf/5/

于 2013-03-03T14:11:05.317 に答える
1

私は、それはあまりにも速く起こると思います。これを行う場合：

$('.container').toggleClass('active',function() {
    $('.container').addClass('all-transition');
});

期待どおりに動作しますよね？

わかりました。テストしましたが、期待どおりに動作しないことに気付きませんでした。ここでそれを補うための代替：

$('.container').removeClass('active').promise().done(function(){
    $('.container').addClass('all-transition');

    $('.container').css('height','300'); //to see the easing
});
于 2013-03-03T13:45:24.220 に答える