Ahora que Bootstrap 5 ha eliminado jQuery, estoy revisando un proyecto y 'reduciéndolo' con JS estándar. Sin embargo, hay una parte en la que estaba usando jQuery para proporcionar un efecto de transición usando:
$('#form-1').hide('slow'); $('#form-2').show('slow');Puedo reemplazar esto con JS estándar usando:
document.querySelector('#form-1').style.display = 'none'; document.querySelector('#form-2').style.display = 'block';Sin embargo, esto da como resultado una transición instantánea :( ¿Hay alguna forma de ralentizar la transición utilizando JS estándar?
Nota: el efecto no fue desvanecerse o deslizarse dentro o fuera de las formas, sino que las ensambló con un efecto de construcción. Es decir, esto no fue un cambio en la opacidad ni fue un efecto de movimiento animado. Por cierto, también estoy buscando para ver si alguien conoce un JS equivalente al jQuery anterior en lugar de agregar algo de CSS.
Hice una función rápida, espero que ayude a asegurarme de pasar la altura y el ancho. Lentamente hace que la opacidad sea 0 y la altura y el ancho 0
function hideSlowly(element, width, height){ let el = document.querySelector(element); el_opacity = 1; el_h = parseInt(height); el_w = parseInt(width); let s = setInterval(function(){ el.style.opacity = el_opacity; el_opacity -= 0.2; el.style.height = el_h + "px"; el_h -= 2; el.style.width = el_w + "px"; el_w -= 2; if(el_opacity <= 0){ el.style.display = "none"; // hide the element // opacity is 0 and element is hidden so clear interval clearInterval(s) } }, 100) }https://jsfiddle.net/9hjstuq7/ Aquí hay un ejemplo
De: CSS muestra ninguno y la animación de opacidad con fotogramas clave no funciona
Lo configuré a continuación como un evento onhover usando css.
#form-1:hover { animation: 3s fadeOut; -webkit-animation: 3s fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 99% { opacity: 0; z-index: 1; } 100% { opacity: 0; display: none; position: fixed; z-index: -5; } } <form id="form-1"> it's like totally a form broooooooooooooo </form>