CSS 3はTransition遷移アニメーションを実行しません.

要素がtransionを設定すると、JavaScriptが該当する属性値を変更すると、その遷移アニメーションがトリガされます.
時には、この値を直接設定したいですが、アニメーションの移行をトリガしないで、最初の直感的なアイデアは、trantio-durationを0に設定して、最後にtransityionの値を復元します.しかし、この方法は通用しません.JavaScriptは単一スレッドのため、メッセージ構造を採用しています.要素にあるスタイルを付与すると、それは直ちに実行されず、現在のメッセージキューを処理し続けます.特定のCSSを処理する段階に入るまで.この点はNode.jsの事件のメカニズムと似ています.前述のJavaScriptはシングルスレッドであるため、上記の方法を採用した結果、「同一の属性に対して値を割り当て、後は前面をカバーする」という結果が出ています.したがって、RecalculateStyleをトリガすると、依然として遷移アニメーションがトリガされます.
したがって、この問題を解決する考え方は二つあります.

は、メッセージの順序を変更する.人工的に遅延を設定することにより、トレイの設定はRecalculateStyleの後に処理されます.

手動でRecalculateStyleをトリガし、修正を有効にする.計算後のスタイルを取得するためにゲットComputatidStyleの方法があることに気づきました.スタイルを計算するなら、必ずRecalculateStyleをトリガします.これまでのCSSは処理されました.

テストコードは以下の通りです.

//js    node.js process.nextTick window.setImmediate      
window.onload = ()=> {
	const [div1, div2, div3, div4, div5] = document.getElementsByTagName("div");
	
	div1.style.backgroundColor = "red";
	div1.style.transition = "background-color 5s";
	
	div2.style.backgroundColor = "red";
	window.setTimeout(()=>{
		div2.style.transition = "background-color 5s";
	}, 100);
	
	div3.style.backgroundColor = "red";
	
	const start = new Date().getTime();
	window.requestAnimationFrame(()=>{
		const end = new Date().getTime();
		const cost = end-start;
		console.log(cost); //       18ms
		div3.style.transition = "background-color 5s";
	});

	div4.style.color = "yellow";
	div4.style.backgroundColor = "red";
	div4.style.marginLeft = "4em";
	//         transition      ，              RecalculateStyle（animation、transition          ）
	getComputedStyle(div4).length;
	//                  
	div4.style.transition = "all 5s";

}



  
setTimeout
requestAnimationFrame
getComputedStyle