关于过渡效果失效的问题

老师好，这是我想的跑马灯轮播图，原理如下：

往左移动时，先过渡动画，然后移动节点

往右移动时，先移动节点，然后过渡动画

效果是能出来的，请老师点评一下，有没有什么不合理的地方或者需要改善的；

然后是标题中的问题，就是我发现，如果一个节点通过dom移动了之后，它就没有了过渡属性，虽说对我写代码来说是友好的，因为不需要想方设法的修改transition属性了，但是，理论上来说不应该，不知道哪里出了问题，请老师解惑。

代码如下（相关问题的代码我已经使用星号标记）：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<!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>
    <style>
        #carousel {
            width: 800px;
            height: 400px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
 
        #carousel .btn {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            background-color: white;
            text-align: center;
            line-height: 40px;
            position: absolute;
            top: 50%;
            margin-top: -20px;
        }
 
        #carousel .btn:hover {
            cursor: pointer;
        }
 
        #carousel .btn.leftBtn {
            left: 10px;
        }
 
        #carousel .btn.rightBtn {
            right: 10px;
        }
 
        #carousel #imgBox div {
            width: 800px;
            height: 400px;
            position: absolute;
            left: 800px;
            font-size: 100px;
            text-align: center;
            line-height: 400px;
            transition: left 1s ease-in-out 0s;
        }
 
        #img1 {
            background-color: yellowgreen;
        }
 
        #img2 {
            background-color: saddlebrown;
        }
 
        #img3 {
            background-color: violet;
        }
 
        #img4 {
            background-color: orange;
        }
 
        #img5 {
            background-color: rebeccapurple;
        }
    </style>
</head>
 
<body>
    <div id="carousel">
        <div id="imgBox">
            <div id="img1" style="left:0px;">1</div>
            <div id="img2">2</div>
            <div id="img3">3</div>
            <div id="img4">4</div>
            <div id="img5">5</div>
        </div>
        <div class="leftBtn btn"></div>
        <div class="rightBtn btn"></div>
    </div>
    <script>
        var leftBtn = document.getElementsByClassName('leftBtn')[0];
        var rightBtn = document.getElementsByClassName('rightBtn')[0];
        var imgBox = document.getElementById('imgBox');
        // children属性可以动态获取
        var boxs = imgBox.children;
        // 节流锁
        var lock = false;
        leftBtn.onclick = function () {
            // 函数节流
            if (lock) return;
            // 先让前两张图往左移
            boxs[0].style.left = '-800px';
            boxs[1].style.left = '0px';
            // 上锁
            lock = true;
            // 延时器，动画过渡之后，将第一个节点移动到最后，以此来循环
            setTimeout(function () {
                imgBox.appendChild(boxs[0]);
                // ************此时设置left属性并不会有过渡效果*************
                boxs[4].style.left = '800px';
                // 解锁
                lock = false;
            }, 1000)
        }
        rightBtn.onclick = function () {
            // 函数节流
            if (lock) return;
            // 先将最后一个节点移动到最前面，以此来循环
            imgBox.insertBefore(boxs[4], boxs[0]);
            // ************此时设置left属性并不会有过渡效果*************
            boxs[0].style.left = '-800px';
            // 不设置延时，box[0]的left会直接到0px，没有过渡效果
            setTimeout(function () {
                boxs[1].style.left = '800px';
                boxs[0].style.left = '0px';
            }, 0)
            // 上锁
            lock = true;
            setTimeout(function () {
                // 解锁
                lock = false;
            }, 1000)
        }
    </script>
</body>
 
</html>

今年刚满10周岁 2022-12-17

源自：DOM 6-3 编写跑马灯轮播图特效

收起

1回答

imooc_慕慕 2022-12-18 13:10:33

同学你好，效果实现方式可以是多种，同学能通过自己的方式实现很好。

问题一:

点击左按钮的时候left属性是有过渡效果，js中没有写过渡效果会继承css中的过渡效果。因此左按钮是没有问题的。

问题二：

当注释掉右按钮的延时器时，此时下面的0px会直接覆盖上面的-800px，因此会是0

同时也是有动画效果的。

如果同学指的不是这个意思，可以图文结合，再详细描述下，便于帮助同学准确的定位与解决问题。

祝学习愉快~

收起回答

提问者今年刚满10周岁 #1

我的问题是当我使用dom的appendChild或者insertBefore方法移动了节点之后，这个被移动的节点的过渡属性会失效，元素节点是瞬间移动过去，而不是‘’咕噜‘’过去；
如果不使用dom的移动节点方法，元素节点还是会有过渡动画

2022-12-18 14:36:14
imooc_慕慕回复提问者今年刚满10周岁 #2

同学你好，分析如下：
这里不会出现‘咕噜’的效果，因为同学添加的元素是每次将添加的这个元素设置为当前元素并且left值为-800px,第二张为0px，那么当添加一个元素的时候，当前的元素的 left值就会是-800px，第二个元素的left值为0px，因此它每次走的都是800px，一个div的宽度。
如果不使用移动节点，只能点击一次。
祝学习愉快~

2022-12-18 17:03:53
提问者今年刚满10周岁回复 imooc_慕慕 #3

其实我这里并没有添加元素，而是使用appendChild来移动节点的；而且还是没有说到我想问的点上，可能文字确实很难表达意思吧，不知道老师有没有联系方式深入沟通一下，谢谢了

2022-12-18 18:44:44