如何使图像通过过渡获得 `left: 0` 样式？

问题描述

我在这里有一个图像，它最初有一个 left: 100%，我希望它在方法 left: 0 执行时被移动到 move，但有一个过渡，以便运动被看见了，

我已经给 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>

解决方法

您可能需要在您的 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 中，因为它已经在顶部声明了。