javascript - 如何使图像获得带有过渡的“left：0”样式？

Question

我在这里有一个图像，最初有​​一个left: 100%，我希望在执行left: 0方法时将其移动到move，但是有一个过渡以便可以看到运动，

我已经给了 a transition: 700ms，.img但这似乎不起作用，有人知道我如何使过渡工作吗？

document.addEventListener('DOMContentLoaded', function (event) {

    let sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];

    class Image {
        sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
        constructor(_src) {
            this.src = _src;
            this.width = `${window.getComputedStyle(sliderWrapper).width}`;
            this.move()
        }
    }
    Image.prototype.move = function () {
        let img = document.createElement('img');
        img.setAttribute("src", this.src);
        img.setAttribute("width", this.width);
        img.classList.add('img')
        img.style.left = '0';
        sliderWrapper.appendChild(img);
    }
    let img = new Image('http://placehold.jp/24/cc9999/993333/150x100.png')

});

*{
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .slider-wrapper{
            position: relative;
            max-width: 60%;
            height: 350px;
            margin: 70px auto;
            border: 1px solid #000;
        }
        .img{
            position: absolute;
            left: 100%;
            top: 0;
            transition: 700ms;
        }

<div class="slider-wrapper">
</div>

标签： javascriptclasstransitionmotion

Answer 1

您可能需要在 javascript 代码中添加 setTimeout(...) ：

    Image.prototype.move = function () {
        let img = document.createElement('img');
        img.setAttribute("src", this.src);
        img.setAttribute("width", this.width);
        img.classList.add('img')
       
        sliderWrapper.appendChild(img); // you need to append this before you set "left: 0"
     
        // use setTimeout to animate the image
        setTimeout(() => {
            img.style.left = '0'; // now this will animate the image
        }, 100);
    }

[编辑]：无需输入

sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];

在类中，Image因为它已经在顶部声明。