Анимация полета товара в корзину на ReactJS

Question

Меня интересует возможность реализации полёта товара в корзину. При клике "Добавить в корзину", товар должен плавно улетать в корзину. Не очень понимаю как это сделать на React или Next.Js. Посоветуйте библиотеки или примерные шаги.

Answer 1

Может ответ уже не актуален, но самый простой способ это создать поверх нужного блока элемент с нужной картинкой, сделать его невидимым и показывать его по клику изменяя state. Дальше всё решается по средствам css анимации, просто изменяя параметры в transform.

<div onClick={() => click()}>
  click
</div>

flyToBusketAnimation: {
    animation: fly 2s 1;
    top: 0;
    left: 0;
    position: fixed;
    zIndex: 999;
    pointerEvents: none;
  },

@keyframes fly {
    0%{
        transform: translate(10vh, 90vh);
        opacity: .50;
        width: 100%
    }
    100%{
        transform: translate(90vw, 10vh);
        opacity: 0;
        width: 0%
    }
}

const [open, setOpen] = useState(false);

const click = () => {
  setOpen(!open)
}

Это очень кратко.. просто нужно менять параметры в css

БЛОГ НА HUSL

Анимация полета товара в корзину на ReactJS

Ответы (1 шт):