Hice algunos códigos fandeIn y fadeOut para un ejercicio. Estoy tratando de eliminar setTimeout() en fadeIn(). Tal vez como usar un addEventListner, pero no hay transición en .displayNone.
En el MDN, acabo de encontrar transiciones que interactúan con EventListner.
function fadeOut(disable) { disable.classList.remove('visible'); disable.classList.add('hidden'); disable.addEventListener('transitionend', () => disable.classList.add('displayNone')); }; function fadein(enable, timer) { if (!timer) timer = 350; enable.classList.remove('displayNone'); setTimeout(function () { enable.classList.remove('hidden'); enable.classList.add('visible'); }, timer); }; .displayNone { display: none; } .visible { visibility: visible; opacity: 1; transition: opacity 1.5s linear; } .hidden { visibility: hidden; opacity: 0; transition: visibility 0s 350ms, opacity 350ms, display 350ms linear; }PD: Esto funciona bien, solo estoy intentando otra forma de hacer que funcione también.
El método setTimeout devuelve un descriptor/id de tiempo de espera (en realidad, solo un número entero). Puede usarlo para eliminar el tiempo de espera más tarde:
// setting timeout var timeout = window.setTimeout(function(){}, 5000); window.clearTimeout( timeout )