Недавно я наткнулся на старое руководство, демонстрирующее анимацию перехода в корзину с использованием jQuery. Я хотел бросить вызов самому себе, реализовав тот же эффект на чистом JavaScript.

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

Хитрость заключается в том, чтобы клонировать изображение продукта и добавить его к элементу продукта. Затем вычислите координаты вашего клонированного изображения и значка корзины, получите разницу и переведите в нее свое изображение. Вы можете добавить дополнительные эффекты, такие как масштабирование до 0 или затухание непрозрачности. Добавьте свойство перехода, чтобы анимировать изменения стиля.

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