我正在使用react-hot-toast來顯示警報并在更改頁面時為其設定影片。
頁面更改時影片播放淡入兩次。
我正在使用tailwindcss -animatetailwind.config.js添加影片類。
我只使用 4 個影片類：animate-in, animate-out, fade-in, &fade-out
我正在為自定義Success警報框設定影片。
成功.tsx
import toast, { ToastOptions } from 'react-hot-toast';
import { CheckCircleIcon } from '@heroicons/react/outline';
import clsx from 'clsx';
interface ISuccess {
message: string;
options?: ToastOptions;
}
export const Success = ({ message, options }: ISuccess) => {
toast.custom(
(t) => (
<div
className={clsx(
'flex rounded-lg bg-gray-900 py-2.5 px-3 shadow-lg ring-1 ring-black ring-opacity-5',
{
'animate-in fade-in': t.visible,
'fade-out animate-out': !t.visible,
}
)}
>
<CheckCircleIcon className="h-6 w-6 text-gray-700" />
<div className="ml-2 text-gray-300">{message}</div>
</div>
),
{
duration: 250,
...options,
}
);
};
如果您單擊下面演示中的鏈接，那么您應該會看到影片播放兩次，如下面的 gif 所示：
我該如何解決它，讓它只播放一次？
Stackblitz 演示 → https://stackblitz.com/edit/animate-in-tailwind
Github 回購 → https://github.com/deadcoder0904/animate-in-tailwind/
uj5u.com熱心網友回復：
使用 切換影片時t.visible，完成關鍵幀的fadeIn和fadeOutcss 屬性不會保留。換句話說，Opacity: 0將被洗掉，導致節點再次出現。您可以嘗試添加style={{ animationFillMode: 'forwards' }}以保留最后一個關鍵幀設定的計算值。
例子：
<div
style={{ animationFillMode: 'forwards' }}
className={clsx(
'flex rounded-lg bg-gray-900 py-2.5 px-3 shadow-lg ring-1 ring-black ring-opacity-5',
{
'animate-in fade-in': t.visible,
'fade-out animate-out': !t.visible,
}
)}
>
fill-mode-forwards如果您使用的是tailwind-animation，還可以通過添加類名來更改影片填充模式。
例子：
<div
className={clsx(
'flex rounded-lg bg-gray-900 py-2.5 px-3 shadow-lg ring-1 ring-black ring-opacity-5',
{
'animate-in fade-in fill-mode-forwards': t.visible,
'fade-out animate-out fill-mode-forwards': !t.visible,
}
)}
>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/488230.html
標籤：javascript 反应 动画 下一个.js 顺风CSS