从篮子中取出时滑动动画

Question

我正在创建一个应用程序，它在单击 'remove from basket' 按钮时删除元素。现在我想用动画来做。我尝试了各种方法，但没有成功。有人可以帮忙添加滑动动画吗

下面是我的代码。

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>
  );
}

从购物篮中删除功能运行良好。

谢谢！

Answer 1

使用Framer-Motion动画库首先安装 npm install framer-motion

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

import { motion } from "framer-motion";
import { AnimateSharedLayout } from "framer-motion";

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

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

  return (
    <AnimateSharedLayout>
      <motion.div layout className="checkoutProduct">
        <img className="CheckoutProduct__image" src={image} />
        <motion.div layout 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 && (
            <motion.button onClick={removeFromBasket}>Remove from basket</button>
          )}
        </motion.div>
      </motion.div>
    </AnimateSharedLayout>
  );
}

请分享您的代码，以防它不起作用。

Answer 2

我个人使用 animate.css 干净简单 link 用法非常简单易用。

从篮子中取出时滑动动画

slide animation on removing from basket

javascript

css

css-animations

reactjs

react-redux