<img/>元素在<div>元素之间过渡

Question

我正在努力寻找解决问题的最佳方案。

在页面加载时，我希望图像显示在.images-container div的中心。图像出现后，我希望它移动到它所属的.col-2 div中的位置。每个元素一次出现一个，然后移至其最终位置。问题在于，这将要求图像元素从div元素实质上“跳转”到其所属的div。

我最初的想法是从具有display: none的类开始，然后使用JavaScript遍历并添加.img-wrapper类。但是，这不会将img元素从中心col-2 div“跳”到左侧col-2 div。

我希望这是有道理的，如果没有的话，下面是一些图片，希望可以更好地解释这一点。

非常感谢您！

The starting position of the first element.

The end position of the first element.

The full animation with columns highlighted.

The end result with all the pictures loaded in their final position.

/* My first attempt at removing and adding classes */

let idx = 0;
let img = $('.no-show');
let timer = setInterval(start, 250);
        
        
function start() {
    if(idx < img.length) {
        img[idx].classList.add('img-start'); 
        img[idx].classList.remove('no-show');
        idx++;
    } else {
        clearInterval(timer);
    }         
 }
 
 /* And then I would loop again and remove the 'move' class and add the 'img-wrapper' class which would ideally move it to it's end position */

.images-container {
    display: inline-block;
    position: relative; 
    float: right;
    width: 54%;
    height: 100%;
}

.col-2 {
    display: inline-block;
    position: relative;
    width: 32%;
    height: inherit;
    float: left;
}

.img-wrapper {
    display: block;
    position: relative;
    margin: 12% auto;
    width: 90%;
    height: auto;
    box-shadow: 0 10px 10px 3px rgba(0,0,0, 0.4);
}

/*--- Classes I attempted to use ---*/

.no-show {
    display: none;
}

.img-start {
    position: absolute;
    top: 35%;
    left: 35%;
    width: 210px;
}

<div class="images-container">
  <div class="col-2">
    <div class="img-wrapper">
      <img class="preview-img" src="image_url">
    </div>
    <div class="img-wrapper">
      <img class="preview-img" src="image_url">
    </div>
    <div class="img-wrapper">
      <img class="preview-img" src="image_url">
    </div>
  </div>
  <div class="col-2">
    <div class="img-wrapper">
      <img class="preview-img" src="image_url">
    </div>
    <div class="img-wrapper">
      <img class="preview-img" src="image_url">
    </div>
    <div class="img-wrapper">
      <img class="preview-img" src="image_url">
    </div>
  </div>
  <div class="col-2">
    <div class="img-wrapper">
      <img class="preview-img" src="image_url">
    </div>
    <div class="img-wrapper">
      <img class="preview-img" src="image_url">
    </div>
  </div>
</div>