Javascript 为什么元素在设置动画后返回到第一个位置？

我正在使用JavaScript创建的图像的动画方法滑入

。滑块包装

，它确实会滑动，但它会跳回到动画方法之前为它设置的第一个位置，这不是我想要的，我希望图像动画化并停留在新位置，而不是回到它来自的第一个位置

我应该对此方法进行哪些修改

document.addEventListener（'DOMContentLoaded'，函数（事件）{
让sliderWrapper=document.getElementsByClassName（'slider-wrapper'）[0]；
让SliderRapperWidth=SliderrRapper.offsetWidth；
阶级形象{
SliderRapper=document.getElementsByCassName（'slider-wrapper'）[0]；
构造函数（_src）{
this.src=\u src；
this.width=window.getComputedStyle（SliderRapper）.width；
这个
}
}
Image.prototype.appease=函数（）{
设img=document.createElement（'img'）；
setAttribute（“src”，this.src）；
img.style.width=此.width；
img.classList.add（'img'）；
滑块式振子（img）；
img.style.left=`${sliderRapperWidth}px`；
img.onload=函数（）{
SliderRapper.style.height=`${img.height}px`；
}
动画（{左：0}，800）；
}
让实例=新图像(`https://via.placeholder.com/150`);
});
*{
填充：0；
保证金：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.滑块包装器{
位置：相对位置；
最大宽度：150px；
利润率：70像素自动；
边框：2倍实心#ff0000；
框大小：内容框；
}
img{
位置：绝对位置；
显示：块；
}
动画需要不知道动画完成后该做什么。可以通过向动画选项添加特性来解决此问题

将填充值设置为向前<代码>。这将告诉动画，从现在起，动画的最终状态应用作样式

要改进动画，请使用CSS属性，而不是
left
。“左”将导致整个页面在其更改的每个像素上重新呈现。转换是经过优化的，只会重新提交页面中发生更改的部分，使用的资源比其他部分少，因此性能更高


document.addEventListener（'DOMContentLoaded'，函数（事件）{
让sliderWrapper=document.getElementsByClassName（'slider-wrapper'）[0]；
设SliderRapperWidth=SliderRapper.offsetWidth；
阶级形象{
SliderRapper=document.getElementsByCassName（'slider-wrapper'）[0]；
构造函数（_src）{
this.src=\u src；
this.width=window.getComputedStyle（SliderRapper）.width；
这个
}
}
Image.prototype.appease=函数（）{
设img=document.createElement（'img'）；
setAttribute（“src”，this.src）；
img.style.width=此.width；
img.classList.add（'img'）；
滑块式振子（img）；
img.style.transform=`translate3d（${sliderRapperWidth}px，0，0）`；
img.onload=函数（）{
SliderRapper.style.height=`${img.height}px`；
}
动画（{transform:'translate3d（0,0,0）'）{
持续时间：800，
填充：“前锋”
});
}
让实例=新图像(`https://via.placeholder.com/150`);
});
*{
填充：0；
保证金：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.滑块包装器{
位置：相对位置；
最大宽度：150px；
利润率：70像素自动；
边框：2倍实心#ff0000；
框大小：内容框；
}
img{
位置：绝对位置；
显示：块；
}