Estoy tratando de eliminar jQuery de un sitio web antiguo, pero estoy atascado con esta animación que tienen.
Solo puedo replicar el desvanecimiento de la opacidad, pero parece que no puedo hacer la transición de la visibilidad lentamente, solo va 1 o 0, ¿cómo puedo hacer ambas cosas sin problemas?
$("#square").css({ opacity: 0.0, visibility: "visible" }).animate({ opacity: 1.0 }, 200); $("#square").css({ opacity: 1.0, visibility: "hidden" }).animate({ opacity: 0.0 }, 200);La opción más simple (y con mucho la más eficaz) aquí es usar CSS para animaciones. La animación JS debe evitarse tanto como sea posible, ya que es lenta y no acelerada por hardware.
Para hacer lo que necesita en CSS, la regla clave a aplicar es transition . Puede usar esto para controlar las propiedades que se van a animar, su retraso, el tiempo de ejecución, etc. Hay más información disponible en MDN .
He aquí un ejemplo rudimentario. Tenga en cuenta que JS solo se usa para agregar la clase para activar la animación; no controla la animación en absoluto.
let square = document.querySelector('#square'); document.querySelector('button').addEventListener('click', () => { square.classList.toggle('show'); }); #square { width: 200px; height: 200px; background-color: #C00; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none; } #square.show { opacity: 1.0; visibility: visible; } <button>Toggle the square...</button> <div id="square"></div>