トランジションアニメーションとdisplay_html/css_WEB-ITnoseの間の競合を解決するためのいくつかの方法

デモに示されているように (表示されない場合は、ソース アドレス http://jsfiddle.net/ihardcoder/HNduT/2/ を確認してください)、基本的な効果は、 「Translate」ボタンをクリックすると、青い領域の透明度が 0 になり、display:none が非表示になります。Reset ボタンをクリックすると、最初に青い領域の display:block が表示され、その後徐々に透明度が 1 に戻ります。コードは次のとおりです。

 1 var btn1 = $("#testbtn1"); 2 var btn2 = $("#testbtn2"); 3 var container = $("#container"); 4  5 btn1.on('click', function(e) { 6     container.css({ 7         "transition": "opacity 1s", 8         "-webkit-transition": "opacity 1s", 9         "-moz-transition": "opacity 1s",10         "-o-transition": "opacity 1s",11         "-ms-transition": "opacity 1s",12         "opacity": "0.1"13          });14     setTimeout(function() {15         container.css("display", "none");16     }, 1000);17 });18 btn2.on('click', function(e) {19     container.css("display","block");20     container.css("display");21     container.css("opacity","1");22 });

上記のコードの 20 行目は、このコードの機能を疑問視する人もいるかもしれません。実際、このコードがないと、[リセット] をクリックした後に得られる効果は次のとおりです。即座に表示され、透明度変更のトランジション効果はありません。

この現象の原因については、CSS3のトランジションが表示変更をサポートしていないので、14章で説明するようにしています。この線は、不透明度の遷移アニメーションを setTimeout による表示操作から分離します。

コードの 20 行目の目的については、ブラウザの UI スレッドが UI 操作を処理するときに、複数の css 属性の set 操作を同じティックに追加する、と私は理解しています (ブラウザについて To)ティック メカニズムを処理する場合は、http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering?utm_source=infoq&utm_medium=popular_links_homepage) を参照してください。コードの 20 行目を挿入すると、19 行目と 21 行目の css 属性の set 操作が同時に実行されるため、その効果は即座に表示されます。コードの 20 行目は、実際には css 属性の get 操作です。つまり、2 つの CSS 属性の set 操作の間に get 操作が挿入され、表示操作と不透明度操作が異なるティックで実行され、トランジション効果が得られます。欲しい。

2 番目の方法は、遷移時の表示に破壊的な影響があるため、ハッキングする別の方法があります。それには何も問題はありません。setTimeout です。 (これは完全に js の大きな致命的です!) コードは次のとおりです:

1  btn2.on('click', function(e) {2     container.css("display","block");3     setTimeout(function(){4        container.css("opacity","1");5     },delay);6  });

しかし、setTimeout メソッドの使用には欠点があります。5 行目の遅延はブラウザーごとに異なります。同じブラウザの異なるバージョンであっても)、ブラウザで異なる値を設定する必要があります)。私がテストした結果、chrome35 と IE10 では late=0 で十分であり、Firefox30 では late>=14 で十分でした。

3 番目の解決策は、window.requestAnimationFrame を使用することです。コードは次のとおりです。

1 btn2.on('click', function(e) {2       container.css("display","block");3       requestanimationframe(function(){4          container.css("opacity","1");5       });6    });

requestAnimationFrame の機能は、不透明度の操作を次のティックに延期し、それによって表示操作を分離することです。 setTimeout と同じです。

さらに、なぜ表示によって遷移アニメーションが破壊されるのかについては、その内部メカニズムを証明する関連情報がまだ見つかりません。私の個人的な理解では、表示操作がブラウザのリフロー操作をトリガーし、遷移がサポートされていると考えています。この効果は、ブラウザの再描画操作をトリガーするだけです。上記のデモに戻ると、visibility 属性によって表示と非表示を制御すると、トランジションの効果は破壊されません。したがって、一時的に考えられるのは、リフローとリペイントを組み合わせるとトランジションのアニメーション効果が損なわれるということです。詳しい理由については、ちょっとお教えください~