Java script / css / html problem

Question

Witam,

obecnie zajmuje sie tworzeniem strony, i natknalem sie na maly problem. Probuje wdrożyć do mojej strony prosty loading screen, chce aby mial on animacje FadeOut przy wyjsciu gdy strona sie zaladuje. Nastepnie chce zrobic tak aby caly pojemnik z loading screenem sie usunal *! ale dopiero po wykonaniu animacji.*. No i tutaj problem bo gdy animacja jest wykonywana automatycznie usuwa mi pojemnik i jest nagły przeskok bez animacji. Kod:

	<script>
		window.addEventListener("load", function(){
			var load_screen = document.getElementById("load_screen");
			document.querySelector("#load_screen").style.animation = "fadeOut 2s";
			document.querySelector("#load_screen").style.opacity = "0";
			document.body.removeChild(load_screen);		
		});
	</script>

Prosze o pomoc!

Answer 1

Koniec animacji lub tranzycji na elemencie możesz w JS złapać podpinając się odpowiednio na eventy animationend i transitionend.

Comments

Jestem początkującym i nie za bardzo wiem jak to zastosować :/

---

Analogicznie jak podpiąłeś się na event load. W podlinkowanej dokumentacji są przykłady. Czego nie rozumiesz?

Answer 2

Wpadłem na pomysł że może gdy keyframes'y będą miały 100% to mój Div - load screen moge ustawić jako display:none tylko nie wiem jakbym mógł to zapisać w JS. Help ! :)