为什么元素在动画后回到第一个位置？答案

【问题标题】：Why the element gets back to first position after animate?为什么元素在动画后回到第一个位置？
【发布时间】：2021-05-14 13:05:45
【问题描述】：

我正在使用我在 JavaScript 中创建的图像的 animate 方法滑入.slider-wrapper，它确实会滑动，但它会跳回到在 animate 方法之前为它设置的第一个位置，这不是我想要的，我希望图像动画并保持在新位置，而不是回到它来自的第一个位置，

我应该对这种方法进行哪些修改？

document.addEventListener('DOMContentLoaded', function (event) {
    let sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
    let sliderWrapperWidth = sliderWrapper.offsetWidth;
    class Image {
        sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
        constructor(_src) {
            this.src = _src;
            this.width = window.getComputedStyle(sliderWrapper).width;
            this.appear()
        }
    }
    Image.prototype.appear = function () {
        let img = document.createElement('img');
        img.setAttribute("src", this.src);
        img.style.width = this.width;
        img.classList.add('img');
        sliderWrapper.appendChild(img);
        img.style.left = `${sliderWrapperWidth}px`;
        img.onload = function() {
            sliderWrapper.style.height = `${img.height}px`;
        }
        img.animate({left: 0}, 800);
    }
        let instance = new Image(`https://via.placeholder.com/150`);
});

*{
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .slider-wrapper{
            position: relative;
            max-width: 150px;
            margin: 70px auto;
            border: 2px solid #ff0000;
            box-sizing: content-box;
        }
        img{
            position: absolute;
            display: block;
        }

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

【问题讨论】：

标签： javascript class animation methods

【解决方案1】：

动画需要不知道动画完成后要做什么。您可以通过在动画选项中添加fill 属性来解决此问题。

将填充的值设置为forwards。这将告诉动画，从现在开始应该使用动画的最终状态作为样式。

要改进您的动画，请使用 CSS transform 属性而不是 left。 Left 将导致整个页面在其更改的每个像素上重新呈现。转换经过优化，仅重新渲染页面中发生变化的部分，使用的资源比替代方法少，因此性能更高。

document.addEventListener('DOMContentLoaded', function (event) {
    let sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
    let sliderWrapperWidth = sliderWrapper.offsetWidth;

    class Image {
        sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
        constructor(_src) {
            this.src = _src;
            this.width = window.getComputedStyle(sliderWrapper).width;
            this.appear()
        }
    }

    Image.prototype.appear = function () {
        let img = document.createElement('img');
        img.setAttribute("src", this.src);
        img.style.width = this.width;
        img.classList.add('img');
        sliderWrapper.appendChild(img);
        img.style.transform = `translate3d(${sliderWrapperWidth}px, 0, 0)`;
        
        img.onload = function() {
            sliderWrapper.style.height = `${img.height}px`;
        }
        
        img.animate({transform: 'translate3d(0, 0, 0)'}, {
          duration: 800,
          fill: 'forwards'
        });
    }
        
    let instance = new Image(`https://via.placeholder.com/150`);
});

*{
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .slider-wrapper{
            position: relative;
            max-width: 150px;
            margin: 70px auto;
            border: 2px solid #ff0000;
            box-sizing: content-box;
        }
        img{
            position: absolute;
            display: block;
        }

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

【讨论】：