如何将一张图片淡出过渡到另一张图片之前？

<div class="image-container">
  <img src="image1.jpg" class="image1">
  <img src="image2.jpg" class="image2">
</div>

.image-container {
  position: relative;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.image-container img.image2 {
  opacity: 0;
}

// 获取图片元素
const image1 = document.querySelector('.image1');
const image2 = document.querySelector('.image2');

// 设置定时器，在一定时间后将第一张图片的透明度设置为0，实现淡出效果
setTimeout(() => {
  image1.style.opacity = 0;
}, 2000);

// 在一定时间后将第二张图片的透明度设置为1，实现淡入效果
setTimeout(() => {
  image2.style.opacity = 1;
}, 3000);