从篮子中取出时的幻灯片动画答案

【问题标题】：slide animation on removing from basket从篮子中取出时的幻灯片动画
【发布时间】：2021-06-08 15:53:18
【问题描述】：

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

下面是我的代码。

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

从购物篮中移除功能正常。

谢谢！

【问题讨论】：

标签： javascript css reactjs react-redux css-animations

【解决方案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>
  );
}

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

【讨论】：

【解决方案2】：

我个人使用animate.css干净简洁link，使用起来真的很简单。

【讨论】：