Transition nachdem Seite geladen hat

[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