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 reescribir este método JS sin las funciones de flecha?

18 Jun, 2023 Programación

Necesito eliminar las funciones de flecha para los siguientes métodos de animate.style; necesito ejecutar este código en un navegador Chromium heredado (40) que no admite funciones de flecha. Estoy tratando de convertirlo en una función heredada tradicional, pero sigo obteniendo errores de sintaxis ya que mi cerebro parece solo funcionar con funciones de flecha. ¡Cualquier ayuda con este desafío es profundamente apreciada!

const animateCSS = (elemento, animación, prefijo = 'animate__') =>
  // Creamos una promesa y la devolvemos
  new Promise((resolver, rechazar) => {
    const nombreAnimación = `${prefijo}${animación}`;
    const nodo = document.querySelector(elemento);

node.classList.add(`${prefijo}animated`, nombreAnimación);

// Cuando finaliza la animación, limpiamos las clases y resolvemos la promesa
  function handleAnimationEnd(evento) {
    evento.stopPropagation();
    nodo.classList.remove(`${prefijo}animated`, nombreAnimación);
    resolver('La animación terminó');
}

nodo.addEventListener('animationend', handleAnimationEnd, {once: true});
});

Y así es como usamos el método anterior, que también contiene una función de flecha:

animateCSS(‘.mi-elemento’, ‘rebotar’);

//o
animateCSS(‘.mi-elemento’, ‘rebotar’).then((mensaje) => {
// Hacer algo después de la animación
});
“`

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para convertir las funciones de flecha en el método animateCSS () a funciones tradicionales legadas, el código debería verse así:

    function animateCSS(elemento, animación, prefijo) {
  // Creamos una promesa y la devolvemos
  return new Promise(function(resolve, reject) {
    var nombreAnimacion = (prefijo || 'animate__') + animación;
    var nodo = document.querySelector(elemento);

    nodo.classList.add((prefijo || 'animate__') + 'animated', nombreAnimacion);

    // Cuando termina la animación, limpiamos las clases y resolvemos la promesa.
    function handleAnimationEnd(event) {
      event.stopPropagation();
      nodo.classList.remove((prefijo || 'animate__') + 'animated', nombreAnimacion);
      resolve('Animación terminada');
    }

    nodo.addEventListener('animationend', handleAnimationEnd, {once: true});
  });
}

    Y para usar el método animateCSS (), el código debería verse así:

    animateCSS('.my-element', 'bounce');

// o
animateCSS('.my-element', 'bounce').then(function(mensaje) {
  // Haz algo después de la animación.
});

    Estos cambios deberían eliminar las funciones de flecha y hacer que el código sea compatible con navegadores más antiguos que no las admiten.

Comments are closed.