Добавление элементов из json и последующее удаление?

Question

[Aleksandr]

Нужно сделать что-то типо вертикальной бегущей строки, в которую динамически добавляются элементы из JSON и после того как элемент выходит из контейнера удаляются.
Подскажите каким образом можно это реализовать?

Что имею : https://codepen.io/anon/pen/JNWMMb

Comments

[Сергей Соколов]

Бегущая вертиально строка состоит только из элементов из JSON'а? После исчезновения элемента из вида, что и откуда удалять? Что показывать, когда JSON исчерпан?

[Aleksandr]

Сергей Соколов: строка состоит из элементов li внутри которых элемент изображения и несколько блочных, в которые данные передаются из JSON. Выше я привел пример. После удаления из вида из элемента ul должен удаляться скрывшейся элемент li.
Когда json исчерпан повторять все по новой.

[Сергей Соколов]

Александр Котов: так же себя ведут все «карусели» для картинок. В вашем случае, если товаров в JSON не сотни тысяч, есть смысл не удалять, а лишь вынимать из дерева, «кэшировать» сформированные DOM-элементы.

Answer 1

[Сергей Соколов]

Известно, сколько максимум блоков видно одновременно. Блоки держать в массиве. Вставлять и вынимать их из DOM – в странице присутствуют в любой момент только те 2 блока, что видны.

Можно сделать на JS, но анимация дергается.

Но лучше вариант с CSS анимацией. Тут используется две анимации – въезд в кадр, и выезд. По окончании каждой анимации вызывается событие transitionend. По завершении въезда – пора запускать выезд себя и въезд следующего.

Comments

[Aleksandr]

Не могу разобраться, где задается кол-во видимых блоков, подскажите плиз.

[Сергей Соколов]

Александр Котов: макс количество видимых блоков = высота вьюпорта / высота одного блока (округлить в бОльшую сторону)

[Сергей Соколов]

Александр Котов: в моём фиддле оно не вычисляется – жестко считается, что макс 2 блока видны. Для бОльшего числа одновременно видимых блоков будет больше «событий» (больше анимаций).

[Aleksandr]

Сергей Соколов: Вот смотрите, что у меня получается https://codepen.io/anon/pen/JNWMMb
пока не могу понять, как убрать это дерганье и выводить допустим 3 элемента

Answer 2

[Иван Вишневский]

С помощью js-объекта и JSON.stringify(objectName).

Comments

[Aleksandr]

Вопрос наверно не корректно я задал. Мне нужно понять как удалять элементы, которые вышли из блока и только после этого добавлять новые

[Иван Вишневский]

Хм, то есть у нас есть какая-то строка, которая непрерывно движется вниз. Как только они попадают за границы блока, где это всё находится, они удаляются, а при этом создаются новые сверху. Так? Возможно, во мне дело, но я не слишком понимаю суть всё ещё.

[Aleksandr]

forgetable: да. именно так как вы написали.

[Иван Вишневский]

Самый элементарный и "в лоб" способ подходит, если у нас фиксированная высота. Вот у нас есть JSON, мы переводим его в объект при помощи JSON.parse(objectName), получаем все данные. Допустим, у нас есть строка размером в 500 пикселей и overflow: hidden. Мы создаём в ней объект с классом item-start:

containter {
  position: relative;
}
item-start {
  position: absolute;
  transform: translateY(-20px);
  transition: transform 5s linear;
}

и после этого добавляем к этому объекту класс item-end:

item-end {
  transform: translateY(520px);
}

Наш элемент за 5 секунд дойдёт до конца и скроется, и мы можем поставить сразу таймаут на 5с, чтобы его удалить. Делаем цикл, и каждые 500мс аппендим новый элемент, например, и они начинают вниз ползти.
Если не фиксированная высота, то придётся сложнее, но тоже можно что-нибудь придумать на чистом css.

[Aleksandr]

forgetable: Можно какой-то простенький примерчик?

[Иван Вишневский]

Александр Котов: https://codepen.io/forgetable/pen/xdqYbL

Единственная вещь - при использовании таймеров нужно добавлять события window.onblur и window.onfocus, потому что таймеры плохо работают, если вкладка неактивна. Как только окно не в фокусе, удаляем все элементы с поля, как только снова в фокусе - стартуем заново.