Какие используют анимации для вывода из корзины?

Question

[Genri_Rus]

Все никак не получается понять, какие используют анимации при выводе корзины ?

Хотелось бы наглядных примеров, как вы это реализуете

В моем примере я пытался воспроизвести некую анимацию, но она работает не так, как мне хотелось бы

Вот пример: https://codepen.io/Genri_Rus/pen/zVgMEP

Возможно ли в данном примере добавить плавную анимацию появления элементов ?

Answer 1

[Антон Усачев]

Много разных, зависит от задачи. Вот в этом проекте (демо-версия) мы придумали пиво в корзину бутылками закидывать. =)

Comments

[Genri_Rus]

А в моем примере почему анимация работает некорректно ?

https://codepen.io/Genri_Rus/pen/zVgMEP

Все дело из-за html() ?

[Антон Усачев]

Genri_Rus, нет. У тебя для показа добавленного в корзину элемента все делается очень сложно: создается новый нод, в нем прописываются все значения, этот новый нод вставляется в корзину и ему добавляется класс .item-show. Хотя проще было бы дать клон элемента и забыть.
Кроме того (самое главное), не прописаны никакие анимации (кроме left: 10%; для активного элемента), поэтому откуда бы им взятся?
В моем примере можно покопать style.css и common.js, чтобы понять, как там все работает, как выполняется расчет позиционирования, анимации и проч. Элементы для поиска .showcase__cart и .cart-bubble.

Ну и делал набросок для одного вопрошающего здесь, тот же принцип почти, штудируй:

[Genri_Rus]

Антон Усачев, вы наверно меня неправильно поняли )

Но я имел ввиду анимацию не полета, а анимацию показа в модальном окне

Т.е. в данном случае у меня из-за html() постоянно перезаписываются элементы и из-за этого получается не та анимация

Что делать в данном случае ?

[Genri_Rus]

Антон Усачев,

Хотя проще было бы дать клон элемента и забыть.

Просто у меня данные выводятся из localStorage, а метод html() с помощью цикла эти данные выводит ...

Мне предлагали такой вариант:

заранее сделать блок с display: none, показывать и динамически менять контент в нём когда нужно

Но я так и не понял, как это можно более правильно сделать