es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo hacer una animación de opacidad al reemplazar texto

31 Jul, 2023 Programación

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.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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:

    1. Añade una clase CSS al elemento de texto que deseas animar, por ejemplo:
    <div classname="text">{imageBanner[articles].text}</div>
    1. Define la transición en tu archivo CSS, por ejemplo:
    .text {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.text.show {
  opacity: 1;
}
    1. Cuando actualices el estado articles, añade la clase show al elemento de texto para activar la transición, por ejemplo:
    setInterval(() => {
  if (articles < 2) {
    setArticles(articles => articles + 1)
    setTimeout(() => {
      const texts = document.querySelectorAll(".text")
      texts.forEach(text => text.classList.add("show"))
      setTimeout(() => {
        texts.forEach(text => text.classList.remove("show"))
      }, 4500)
    }, 10)
  }
}, 5000)

    Aquí, las llamadas a setTimeout se utilizan para retrasar la adición y eliminación de la clase show en 10ms, de modo que no ocurra inmediatamente después de la actualización del estado. El valor 4500 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.

Comments are closed.