如何使图像通过过渡获得 `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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）