mutongwu/requestAnimationFrame-style-update.html

## requestAnimationFrame-style-update.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>requestAnimationFrame</title>
    <style type="text/css">
    #box {
        width: 50px;
        height: 50px;
        border: 1px solid red;
        position: absolute;
        top: 100px;
        left: 10px;
/*        transform: translateX(0);
        transition: transform 1s linear;*/
    }
    </style>
</head>

<body>
    <button id="run">Run</button>
    <div id="box"></div>
    <script type="text/javascript">
    const box = document.querySelector('#box');

    function move500px()
    {
        box.style.transform = "translateX(500px)";
    }

    function move1000px()
    {
        box.style.transform = "translateX(500000px)";
    }

    function setAnimation() {
        box.style.transition = "transform 1s linear";
    }
    function run()
    {

        /*
             // box 直接出现在1000px的位置，然后再过渡到500px
            move1000px(); // 【计划】目标移动到1000px
            getComputedStyle(box).transform; // 执行渲染
            // 动画的设定，必须在位置变化之后
            setAnimation(); // 标志要执行动画。
            move500px();    // 目标位置更新，从1000px 移动到 500px

         */
         // 同上
        // move1000px();
        // requestAnimationFrame(() => {
        //     // 动画的设定，必须在位置变化之后
        //     setAnimation();
            // move500px();
        // })
        //

        // not working
        // move1000px(); // 【计划】目标移动到1000px
        // setAnimation();// 标志要执行动画。
        // getComputedStyle(box).transform; // 执行渲染，位置更新（起始位置0，开始执行动画）
        // move500px();  // 瞬间发现（可能移动了一点点位置，肉眼不可见），目标位置更新，移动到 500px
        // // 所以如果是移动 500000px，你可能会发现移动的位置会跟多一些。

        // not working
        // move1000px();
        // setAnimation();
        // setTimeout(function(){
        //   move500px();
        // }, 0)

        // not working
        // move1000px();
        // setAnimation();
        // requestAnimationFrame(() =>{
        //   requestAnimationFrame(()  =>{
        //     move500px();
        //   })
        // });
    }
    document.querySelector("#run").addEventListener("click", run);
    </script>
</body>
https://stackoverflow.com/questions/72546326/requestanimationframe-and-getcomputedstyle-dont-work-as-expected-following-alo
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>requestAnimationFrame</title>
	<style type="text/css">
	#box {
	width: 50px;
	height: 50px;
	border: 1px solid red;
	position: absolute;
	top: 100px;
	left: 10px;
	/* transform: translateX(0);
	transition: transform 1s linear;*/
	}
	</style>
	</head>

	<body>
	<button id="run">Run</button>
	<div id="box"></div>
	<script type="text/javascript">
	const box = document.querySelector('#box');

	function move500px()
	{
	box.style.transform = "translateX(500px)";
	}

	function move1000px()
	{
	box.style.transform = "translateX(500000px)";
	}

	function setAnimation() {
	box.style.transition = "transform 1s linear";
	}
	function run()
	{

	/*
	// box 直接出现在1000px的位置，然后再过渡到500px
	move1000px(); // 【计划】目标移动到1000px
	getComputedStyle(box).transform; // 执行渲染
	// 动画的设定，必须在位置变化之后
	setAnimation(); // 标志要执行动画。
	move500px(); // 目标位置更新，从1000px 移动到 500px

	*/
	// 同上
	// move1000px();
	// requestAnimationFrame(() => {
	// // 动画的设定，必须在位置变化之后
	// setAnimation();
	// move500px();
	// })
	//

	// not working
	// move1000px(); // 【计划】目标移动到1000px
	// setAnimation();// 标志要执行动画。
	// getComputedStyle(box).transform; // 执行渲染，位置更新（起始位置0，开始执行动画）
	// move500px(); // 瞬间发现（可能移动了一点点位置，肉眼不可见），目标位置更新，移动到 500px
	// // 所以如果是移动 500000px，你可能会发现移动的位置会跟多一些。

	// not working
	// move1000px();
	// setAnimation();
	// setTimeout(function(){
	// move500px();
	// }, 0)

	// not working
	// move1000px();
	// setAnimation();
	// requestAnimationFrame(() =>{
	// requestAnimationFrame(() =>{
	// move500px();
	// })
	// });
	}
	document.querySelector("#run").addEventListener("click", run);
	</script>
	</body>
	https://stackoverflow.com/questions/72546326/requestanimationframe-and-getcomputedstyle-dont-work-as-expected-following-alo
	</html>