0
364
Vistas¿La animación Tailwind se reproduce dos veces al cambiar de página en Next.js?
Estoy usando react-hot-toast para mostrar alertas y animarlas mientras cambio de página.
La animación se desvanece dos veces cuando cambia la página.
Estoy usando tailwindcss-animate en mi tailwind.config.js para agregar clases de animación.
Solo estoy usando 4 clases de animación: animate-in , animate-out , fade-in y fade-out
Estoy animando un cuadro de alerta de Success personalizado.
Éxito.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, } ); };Si hace clic en el enlace en la demostración a continuación, debería ver la animación reproducirse dos veces como el gif a continuación:
¿Cómo lo soluciono para que solo se reproduzca una vez?
Demostración de Stackblitz → https://stackblitz.com/edit/animate-in-tailwind
Github Repo → https://github.com/deadcoder0904/animate-in-tailwind/
1 Respuestas
Responde la pregunta0
Cuando cambia la animación usando t.visible , las propiedades css fadeIn y fadeOut del fotograma clave final no se conservarán. En otras palabras, se eliminará la Opacity: 0 , lo que hará que el nodo vuelva a aparecer. Puede intentar agregar style={{ animationFillMode: 'forwards' }} para conservar los valores calculados establecidos por el último fotograma clave.
Ejemplo:
<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, } )} > También puede cambiar el modo de relleno de la animación agregando el nombre de clase fill-mode-forwards si está utilizando tailwind-animation .
Ejemplo:
<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, } )} >