Блог

Я работаю над пользовательским уведомлением о тосте. Но самое сложное для меня в том, что я не смог правильно скрыть уведомление о тосте. Когда я нажимаю, чтобы показать его, у тоста есть анимация слева, проблема в том, что когда тост будет скрыт, он просто исчезнет, и он не сдвинется вправо. Я работаю с css react и tailwind. Вот код. также оставьте ссылку на дело. https://codesandbox.io/s/toast-notification-ucx2v?file=/src/components/toastNotification.jsx Я надеюсь, что вы сможете мне помочь, ребята.

——Компонент приложения——

 import { useEffect, useState } from "react";
import ToastNotification from "./components/toastNotification";
import "./styles.css";

export default function App() {
  const [showToast, setShowToast] = useState(false);

  const addToCart = () => {
    setShowToast(true);
  };

  useEffect(() => {
    setTimeout(() => {
      setShowToast(false);
    }, 3000);
  }, [showToast]);

  return (
    <div className="App">
      <ToastNotification showNotification={showToast} />
      <button
        className="w-1/2 p-2 flex items-center justify-center rounded-md bg-indigo-400 text-white"
        type="submit"
        onClick={addToCart}
      >
        Add to cart
      </button>
    </div>
  );
}
 

——Компонент тостов——

 import React, { useEffect, useState } from "react";

const ToastNotification = ({ showNotification }) => {
  useEffect(() => {
    setTimeout(() => {}, 5000);
  }, []);

  return (
    <>
      {showNotification === false ? null : (
        <div className="static z-20">
          <div
            className={`${
              showNotification
                ? "animate__animated animate__slideInRight absolute top-16 right-4 flex items-center text-white max-w-sm w-full bg-green-400 shadow-md rounded-lg overflow-hidden mx-auto"
                : "animate__animated animate__slideOutRight absolute top-16 right-4 flex items-center text-white max-w-sm w-full bg-green-400 shadow-md rounded-lg mx-auto"
            }`}
          >
            <div class="w-10 border-r px-2">
              <i class="far fa-check-circle"></i>
            </div>
            <div class="flex items-center px-2 py-3">
              <div class="mx-3">
                <p>add to car</p>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default ToastNotification;