jQuery es solo js y css debajo del capó. Es absolutamente posible recrear cualquier acción de jquery en vanilla js. Si desea crear una réplica 1: 1 de la acción de jquery, puede inspeccionar el código fuente para ver cómo jquery está realizando la tarea. Sin embargo, si todo lo que necesita hacer es usar vanilla js para crear una animación y luego eliminar el elemento, aquí hay una demostración de cómo lograrlo.

Mi fragmento de código completo está envuelto en una función anónima asíncrona a la que se llamará de inmediato. Esto evita conflictos de nombres dentro del alcance de mi código y también me permite acceder a la palabra clave await .

Primero creo dos funciones auxiliares. $ lo hará para que pueda tomar elementos del DOM de una manera que se asemeje a jquery. La función auxiliar de wait devuelve una promesa que se resuelve después de un tiempo de espera.

Espero 1000ms o 1s antes de cambiar la opacidad como una preferencia personal al momento de la animación.

Después de cambiar la opacidad, espero 2 segundos más, que es también el tiempo que tarda en mostrarse la transición, y luego elimino el elemento.

Tenga en cuenta que esto solo apuntará al primer elemento con una clase de bubbles-animation , también me gustaría agregar que personalmente prefiero cambiar la transición en la altura en lugar de la opacidad porque colapsa otros elementos un poco más suavemente en el mío. opinión.

El css se explica por sí mismo, pero si tiene algún problema, le recomiendo que consulte esta demostración .

 (async () => { const $ = str => document.querySelector(str); const wait = t => new Promise(r => setTimeout(r, t)); await wait(1000); $(".bubbles-animation").style.opacity = "0.3"; await wait(2000); $(".bubbles-animation").remove(); })();

 .bubbles-animation { transition: opacity 2s; }

 <div class="bubbles-animation">Vanish!</div> <div>Stay!</div>

Sí, puede confiar en las transiciones CSS para lograrlo. Sin embargo, eso dependerá de lo que intente lograr. No hay suficiente información para ir muy lejos en la reflexión.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

 document.getElementById('css-js') .addEventListener('click', () => document.querySelector('.bubbles').classList.add('animation')) document.getElementById('reset') .addEventListener('click', () => document.querySelector('.bubbles').classList.remove('animation'))

 #settings { position: fixed; top: 0px; } .bubbles { position: absolute; height: 100%; top: 0px; width: 100%; background-color: green; transition-property: transform, opacity; transition-duration: 2s, 1.5s; } .animation { opacity: 0; transform: translateY(-100%); }

 <div class=bubbles></div> <div id=settings> <button id=css-js>CSS &amp; Native JS</button> <button id=reset>Reset</button> </div>