CSSのトランジションを削除し、要素を移動してから再度移動してから適用してください。

Question

トランジションに問題があります。

私は左のプロパティにトランジションを持っています。 divを左から860pxから-860pxへの遷移なしで移動したい場合は、遷移で0pxに移動します。

要素に遷移を与えるクラスを削除した場合は、左に-860pxを与えるクラスを適用してください。移行なし。

左から0pxに変更する前にトランジションを適用したいので、再びトランジションクラスを追加し、左に0のクラスを付けます。クロムでこれを行うと、トランジションが適用されます0に加えて-860pxの位置への途中の要素で、私が望むものではありません。

私はまた、間に遅延を避けたいと思います。しかし、私は、Chromeが-860pxで要素を再レンダリングしたときに私に知らせるイベントがあるとは思わない。何か案は？

ここにいくつかのコード例を示します。トランジションを持つクラスは：

.div-transition { 
    -webkit-transition:all 0.8s ease-in-out; 
    -moz-transition:all 0.8s ease-in-out; 
    -o-transition:all 0.8s ease-in-out; 
    transition:all 0.8s ease-in-out; 
} 

$(".div-to-transition").removeClass('div-transition'); 
$(".div-to-transition").css('left', '-860px'); // So far so good, if I don't add the next two lines. 
$(".div-to-transition").addClass('div-transition'); 
$(".div-to-transition").css('left', '0'); // Now it applies a transition as we move left to -860px, AND from -860px to 0. 

Answer 1

ちょうどコメントを繰り返す：element.scrollWidth;をこのラインクローム要素を再レンダリングしている必要があります後。待つことなく。またはelement.getBoundingClientRect();スマートにしようとすると、クロムが試みられる;）

命令の意図された目的ではなく、副作用であるものを使用することは、常に怖いことです。私はそれらのうちの1つが将来のバージョンで最適化される場合に両方を追加したと思います。

これは悪用のようなものですが、それほど純粋な副作用ではなく、これらのプロパティの性質とCSSの性質の含意です。

短い回答長い：ブラウザに、適用されたスタイルの影響を受けるノードのプロパティを要求しています。ブラウザは、あなたが求めているプロパティに影響を与えていると評価される必要がある、保留中のスタイル変更があることを認識しました。 CSSのカスケードを通して、ほとんどすべてのスタイルは、ページのほぼすべてのノードに何らかの形で影響を与える可能性があります。
たとえば、次のノードが次の行にスライドするほどの大きさの現在のノードを展開すると、そのノードのスタイルにも影響します。親ノードとその後継ノードを忘れないでください。

その混乱を評価するのではなく、すべての保留中のスタイルを適用する方が簡単です（基本的にページ全体を再レンダリングすることを意味します）。

この値で何もしていなくても、このメカニズム全体を起動するように頼んだだけです。

安定した状態になったので、ブラウザは再レンダリングせずに、必要なすべてのプロパティを提供して、ノードのスタイル（またはそのクラス）のスタイルを変更することができます。
//ただ言う：scrollWidthはページ全体を再レンダリングするのと同じではありません。

---

私が最初に考えたのは、クロムが は多分何とか再レンダリングすることなく、あなたがノードの寸法に影響を与える任意のプロパティを変更していないことを評価するため、あなたに答えを提供することができるだろう、単にそのでしたページ全体が、言及したように：混乱のCSSは、それはほとんど不可能です。

将来的に安全にしたい場合は、getBoundingClientRect()を使用してください。明示的に計算された位置とノードの計算された寸法が求められます。