Transition nachdem Seite geladen hat

[Kaj]

Tach,

Ich habe eine Frage zu CSS Transitions. Diese scheinen nach Load nicht zu funktionieren. Ich will einen kleinen Übergang, nachdem jemand meine Seite betritt. Ich habe dafür bisher folgenden Code.

body {
	display: flex;
}
#figur {
	transition: top 0.5s ease;
	background-color: blue;
	width: 100px;
	height: 100px;
	top: 0px;
	position: relative;
}

<div id="figur"></div>

let figur = document.getElementById("figur");
Func = () => {
	figur.style.top = "120px";
}
figur.addEventListener('load', () => {
	Func();
});

Was sagt ihr dazu?

Gruß, Kaj

[Kaj]

Hoppla, habe mich verschrieben, die transition geht natürlich nicht von 0px nach 120px, sondern von 12px nach 0px, damit die Elemente dann nicht unnatürlich über die Seite verteilt werden. Sollte aber für das Problem unerheblich sein.

[Gunnar Bittersmann]

@@Kaj

figur.addEventListener('load', () => {
	Func();
});

Was sagt ihr dazu?

Das kannst du einfacher haben:

figur.addEventListener('load', Func);

Geht natürlich genausowenig. Bei einem div-element feuert kein load-Event.

Außerdem sollte man aus Performanz-Gründen nur transform und opacity animieren; nicht top.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Kaj,

das load-Event feuert auf Ressourcen, die von extern geladen werden. Also Bilder, Scripte, Stylesheets - und am Ende auch das Window. Auf anderen DOM Elementen nicht.

Auf dem Dokument und dem Window feuert noch das DOMContentLoaded Event, nachdem das DOM aufgebaut wurde und externe Ressourcen ggf. noch laden. Interessanterweise funktioniert das bei meinen eigenen Versuchen nicht zuverlässig, wenn das Script ganz am Ende steht, gleich vor </body>. Egal ob mit load oder DOMContentLoaded. Steht das Script zu Beginn, im Head, ist es mit dem load Event auf dem window Objekt kein Problem.

Was auch geht, ist setTimeout(func, 0);

Viel einfacher geht es aber mit Animations-CSS. JavaScript ist dafür überflüssig.

#figur {
  animation: 0.5s ease-in 0s 1 dropIn;
}
@keyframes dropIn { 
  from { transform: translateY(-50px); } 
  to   { transform: translateY(0px) } 
}

translate hat den Vorteil, das das Objekt seinen DOM-Platzhalter beibehält und nur visuell geschoben wird.

Mit einer erweiterten Keyframe-Liste kann man es auch munter zappeln lassen (dann ist aber ease-in-out besser):

@keyframes dropIn { 
  0% { transform: translateY(0px); } 
  25% { transform: translateY(-30px); } 
  75%   { transform: translateY(30px) } 
  100%   { transform: translateY(0px) } 
}

Ob die Animation sinnvoll ist oder Chaos auslöst, ist eine andere Frage.

Rolf

[Kaj]

Ok, danke euch!