I need help with adding a sliding animation to my application when removing an element by clicking the 'remove from basket' button. I have tried several methods but haven't been successful. Can anyone assist me in incorporating the animation?
Here is the code snippet:
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>
);
}
The removal functionality works fine without animations.
Appreciate any assistance!