Есть ли анимация добавления товара в корзину на чистом CSS или JS?

Question

[Ваня Зюзгин]

Нужна анимация полета товара в корзину.

В Google все решения написаны на jQuery, а хотелось бы уйти от этой зависимости.

Comments

[AlexaZem]

Так а в чем сложность в написании своей, я думаю на нее не нужно много времени. (хотя все зависит от анимации)

В Google все решения написаны на jQuery

Вот это интересный момент, а можно пару ссылок?

[Ваня Зюзгин]

AlexaZem, https://www.google.ru/search?ie=UTF-8&hl=ru&q=аним...

[AlexaZem]

Ваня Зюзгин, ок спасибо, я понял эту фразу в буквальном смысле)

[Ваня Зюзгин]

AlexaZem, Спасибо Вам. Реализовал сам через анимации CSS и Vue. Можно было сделать и на чистом JS, но Vue уже есть в проекте.

Answer 1

[profesor08]

В чем проблема jQuery? Благодаря ему, тебе не придется ломать голову над полифилами и выполнять кучу однотипных проверок. Там все уже сделано за тебя и работает годами. Попробуй поработать с classList в ие11.

Чтоб сделать анимацию, тебе надо знать начальные координаты и конечные. Получить их можно при помощи getBoundingClientRect или $.position / $.offset. Далее перемещай элемент как хочешь, хоть на css, задав транзицию и целевую позицию, или какой-то библиотекой.

Comments

[tema_sun]

Очень плюсую. Если нет хорошего бюджета на ванильный js, то лучше брать jquery. Сэкономите тонны времени.

[Ваня Зюзгин]

Реализовал сам. Анимация с помощью CSS, а события с помощью Vue. Заняло примерно 40 минут.