CSSトランジションが時々遅れる

Question

不透明度を変更したCSSトランジションをいくつか行いました。 javascriptを使用して、新しいクラスを追加したり削除したりして始めました。

それは次のようだ：私はクリックした後、クラスの変更を発射のEventListenerを作っ

.element { 
    opacity: 0; 
    z-index; -1; 
    display: none; 
    transition: opacity .2s linear; 
} 

.changeDisplay { 
    display: block; 
} 

.show { 
    z-index: 1; 
    opacity: 1 
} 

JavaScriptで。最初に.changeDisplayクラスが追加され、setTimeout (delay, 4)関数の後に.showクラスも追加されます。フェードインアニメーション（不透明度の遷移）が機能するには、4ms（遅延許容最小値にする必要があります）の遅延が重要です。

問題は - 時にはこれが期待どおりに動作しないことがあります。アニメーションは時々遅くなるので、アニメーション効果が全く働いていない（それはちょうどディスプレイの変化によって現れたように見える）。

なぜそれがありますか、毎回スムーズなアニメーションを得るにはどうすればよいですか？私はChrome（Androidのモバイルクロムにも）、Opera、Firefox、IE（Safariは私の家にリンゴがないためにテストされていませんでした）でこの動作を観察しました。

Answer 1

私の経験の中で、小さくて微妙なアニメーションが必要な場合は、約0.7秒のアニメーションの時間が最善のようです。

さらに、遅延を追加する代わりに、コールバック関数に.showを追加するためのコードを記述します。これにより、.changeDisplayクラスが追加されるとすぐに.showクラスが追加されます。
まだ遅延が欲しいですか？
遷移遅延：0.4s;