<img> Элемент, переходящий между <div>элементами - PullRequest
Новая
       17

<img> Элемент, переходящий между <div>элементами

0 голосов
/ 21 октября 2018

Я изо всех сил пытаюсь найти лучшее решение своей проблемы.

При загрузке страницы я хотел бы, чтобы изображение отображалось в центре .images-container div.Как только изображение появилось, я хочу, чтобы оно переместилось в свое местоположение в .col-2 div, которому оно принадлежит.Каждый элемент будет появляться по одному, а затем перемещаться в свою конечную позицию.Проблема состоит в том, что для того, чтобы элементы изображения по существу «перепрыгнули» из элемента div в элемент div, к которому он принадлежит.перебрал бы и добавил класс .img-wrapper.Однако это не «перепрыгивает» элемент img из центра col-2 div влево col-2 div.

Я надеюсь, что это имеет смысл. Если нет, вот несколько изображений, которые, я надеюсь, помогут объяснить этолучше.

Большое спасибо!

Начальная позиция первого элемента.

Конечная позиция первого элемента.

Полная анимация с выделенными столбцами.

Конечный результат со всеми изображениями, загруженными в их окончательное положение. 

/* 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>
...