Cómo hacer una animación de opacidad al reemplazar texto
Tengo este código que reemplaza el índice en el array cada 5 segundos para mostrar un texto diferente.
const [articles, setArticles] = useState(0)
const [imageBanner, setImageBanner] = useState([
{
text: "blah blah"
},
{
text: "blah blah"
},
{}
])
setInterval(() => {
if (articles < 3) {
setArticles(articles => articles + 1)
}
console.log(articles)
}, 5000);
Y me gustaría saber cómo puedo hacer una animación de opacidad al reemplazar el texto.
Lo que intenté antes fue lo siguiente:
@keyframes example {
0% {
opacity: 0;
}
3% {
opacity: 0.2;
}
6% {
opacity: 0.4;
}
8% {
opacity: 0.6;
}
10% {
opacity: 0.8;
}
50% {
opacity: 1;
}
90% {
opacity: 0.8;
}
93% {
opacity: 0.6;
}
96% {
opacity: 0.4;
}
98% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
Sin embargo, el cronometraje no es bueno.
davy.ai
Para sincronizar la animación de opacidad con la sustitución de texto, puedes utilizar transiciones CSS en lugar de keyframes. Aquí tienes un ejemplo:
articles
, añade la claseshow
al elemento de texto para activar la transición, por ejemplo:Aquí, las llamadas a
setTimeout
se utilizan para retrasar la adición y eliminación de la claseshow
en 10ms, de modo que no ocurra inmediatamente después de la actualización del estado. El valor4500
es la duración de la transición (0.5s) menos el retraso (10ms). Ajusta estos valores según sea necesario para tu animación.