为什么新添加进来的哦元素没有过度效果，而旧的元素就有?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../Reset.css">
        <style>
            ul{
                position: relative;
                /* overflow: hidden; */
                width: 500px;
                height: 300px;
                margin: 0 auto;
            }
            li{
                position: absolute;
                transition: left 0.5s;
            }
            img{
                width: 500px;
                height: 300px;
                vertical-align: bottom;
            }
            a{
                display: block;
            }
            .arrow{
                position: absolute;
                background-color: aqua;
                width: 80px;
                height: 40px;
                text-align: center;
                line-height: 40px;
            }
            .pre{
                left: 710px;
            }
            .next{
                left: 1130px;
            }
    </style>
</head>
<body>
    <div>
        <ul>
            <li style="left: 0px;"><a href="javascript:;"><img src="../img/1.jpg"></a></li>
        </ul>
    </div>
    <div class="pre arrow"><a href="javascipt:;">pre</a></div>
    <div class="next arrow"><a href="javascipt:;">next</a></div>
    <script>
        var pre=document.getElementsByClassName("pre")[0]
        var next=document.getElementsByClassName("next")[0]
        var num=1
        //工厂函数
        function same_fun(position){
            var li=document.createElement("li")
            li.style.left=position+"px"
            var a=document.createElement("a")
            var img=document.createElement("img")
            img.src="../img/"+num+".jpg"
            a.appendChild(img)
            li.appendChild(a)
            ul.appendChild(li)
            var all_li=document.getElementsByTagName("li")
            for(var i=0;i<all_li.length;i++){
                //移除
                if(i<all_li.length-1){
                    var reg=new RegExp(img.src)
                    if(reg.test(all_li[i].firstChild.firstChild.src)){
                        ul.removeChild(all_li[i])
                    }
                }
                //移动
                all_li[i].style.left=(parseInt(all_li[i].style.left)-position)+"px"
            }
        }
        //获取ul
        var ul=document.getElementsByTagName("ul")[0]
        function left(){
            if(++num==6){
                num=1
            }
            same_fun(500)
        }
        function right(){
            if(--num==0){
                num=5
            }
            same_fun(-500)
        }
        pre.addEventListener("click",function(){
            left()
        })
        next.addEventListener("click",function(){
            right()
        })
    </script>
</body>
</html>

setTimeout延时执行for就可以了，脱离当前渲染线程


        function same_fun(position) {

            var li = document.createElement("li")

            li.style.left = position + "px"

            var a = document.createElement("a")

            var img = document.createElement("img")

            img.src = "../img/" + num + ".jpg"

            a.appendChild(img)

            li.appendChild(a)

            ul.appendChild(li)

            var all_li = document.getElementsByTagName("li")

            setTimeout(function () {////////////
                for (var i = 0; i < all_li.length; i++) {

                    //移除

                    if (i < all_li.length - 1) {

                        var reg = new RegExp(img.src)

                        if (reg.test(all_li[i].firstChild.firstChild.src)) {

                            ul.removeChild(all_li[i])

                        }

                    }

                    //移动

                    all_li[i].style.left = (parseInt(all_li[i].style.left) - position) + "px"

                }
            }, 0);

        }

哦是多余的

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632