transition过渡效果无效问题

因为一些事停止学习了7天，为此我又重新回来了。

问题引入

代码：

<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;
        transition: all 2s;
        /* left: 0px; */
    }
    </style>
    <script>
        window.onload=function(){
            var div=document.querySelector("div");
            A();
            B();
            function A(){
                div.style.left="0px";    
            }
            function B(){
                div.style.left="200px";
            }
        }
    </script>

效果：

!!!发现并没有我想要的过渡效果！！！

问题解决

在经过一系列的实验后我发现（查资料可能需要个明确的方向，在此我方向错了所以一直没有找到相关资料。资料和实验双保险还是需要的）
transition生效需要明显的前后效果（默认值即未设定会导致没有“前”效果二无法生效）

实验：
无效代码：

<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;
        /* left: 0px; */
    }
    div:hover{
      transition: all 2s;

      left: 200px;
    }
    </style>

换为hover仍然无效。

但只要嫁给你上述代码中注销掉的left: 0px;复原就会发现transition生效

但同时新的问题来了：
代码：

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;
        transition: all 2s;
        left: 100px;
    }
    </style>
    <script>
        window.onload=function(){
            var div=document.querySelector("div")
                A();
                C();
                B();
            function A(){
                div.style.left="0px";    
            }
            function B(){
                div.style.left="200px";
            }
            function C(){
                div.style.left="500px";
            }
            
        }
    </script>

效果：

我们发现方法A和C都没有执行只执行了最后一个方法B。

个人观点：transition反映的是初末状态的转变所以呈现的是最后一个状态

如有不对，欢迎批评指出