javascript - 从篮子中取出时的幻灯片动画

Question

我正在创建一个应用程序，该应用程序在单击“从篮子中删除”按钮时删除元素。现在我想用动画来做。我尝试了各种方法，但都没有成功。有人可以帮忙添加滑动动画吗？

下面是我的代码。

import React from "react";
import "./CheckoutProduct.css";
import { useStateValue } from "./StateProvider";

export default function CheckoutProduct({
  id,
  image,
  title,
  price,
  rating,
  hideButton
}) {
  const [{ basket }, dispatch] = useStateValue();

  const removeFromBasket = () => {
    dispatch({
      type: "REMOVE_FROM_BASKET",
      id: id
    });
  };

  return (
    <div className="checkoutProduct">
      <img className="CheckoutProduct__image" src={image} />
      <div className="CheckoutProduct__info">
        <p className="CheckoutProduct__title">{title}</p>
        <p className="CheckoutProduct__price">
          <small>$</small>
          <strong>{price}</strong>
        </p>
        <div className="CheckoutProduct__rating">
          {Array(rating)
            .fill()
            .map((_, i) => (
              <p></p>
            ))}
        </div>
        {!hideButton && (
          <button onClick={removeFromBasket}>Remove from basket</button>
        )}
      </div>
    </div>
  );
}

从购物篮中删除功能工作正常。

谢谢！

标签： javascriptcssreactjsreact-reduxcss-animations

Answer 1

我个人使用 animate.css 干净简单的链接，使用起来非常简单。