Tengo un control deslizante con imágenes y videos que se desvanecen tan pronto como se cargan los elementos. Estoy usando una biblioteca de carga diferida común y tan pronto como las imágenes/videos tienen la clase "cargada", la opacidad se anima de 0 a 1.

 img.lazy, video.lazy { opacity: 0; } img.lazy, video:not(.initial), _::-webkit-full-page-media, _:future, :root video:not(.initial){ transition: opacity .3s; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -o-transition: opacity .3s; } img.initial, img.is-loaded, img.error, video.initial, video.entered, video.error{ opacity: 1; } img:not([src]), video:not([src]){ visibility: hidden; }

Esto funciona perfectamente con imágenes, pero los videos de alguna manera se mezclan instantáneamente. Incluso cuando dejo que los videos se carguen en segundo plano y voy a la diapositiva donde se encuentra el video, el video (que ya tiene la clase "está cargado") se muestra instantáneamente después de un par de milisegundos.

Puede ver este problema en mi codepen: https://codepen.io/m42444/pen/PoOXxbG . Simplemente haga clic dentro del cuadro de puntos azul para saltar las diapositivas. El problema solo es visible en el primer ciclo donde no se carga ningún elemento. Luego, cada diapositiva se anima con un fundido al hacer clic (que no tiene nada que ver con el fundido de entrada cargado).

Parece que los videos se están disparando "listos para cargar" demasiado pronto y mi animación de desvanecimiento está ocurriendo con un video sin ninguna superficie visible...

¡Gracias por cualquier ayuda! :)