Javascript + CSS animation will nicht funktionieren?

Hallo,

ich kann mir vorstellen, dass hier so einiges falsch ist. Es geht hauptsächlich um die drei letzten Klassen im CSS und um den kompletten JS Code. Ich will, dass die box auf der linken Seite und der Container unterm HR rein sliden.

Weil des Code etwas lang ist hab ich das auf jsfiddle gespeichert:

https://jsfiddle.net/damvn6wy/26/

danke im voraus.

Answer 1

[Destranix]

boxes.forEach(vox => {

Eher "box" nicht "vox".

Zudem gibt dir deine Browserkonsole noch weitere Fehlermeldungen an:

const boxTop.getBoundingClientRect().top

zu

const boxTop = box.getBoundingClientRect().top

Und du hast die Funktion falsch benannt (ein Typo im Namen).

Ansonsten ist es eher ungünstig, Javascript mit CSS-Animationen zu verknüpfen. Das geht zwar, aber da hast du womöglich nicht ausreichend Kontrolle (da beispielsweise Start und Stop der Animation sich beim Aufruf der entsprechenden Methoden verzögern können).

Ansonsten ist "transform" iirc auch nur schlecht animierbar. Da weiß CSS nicht, wie es Werte ändern soll (das must du aber ausprobieren, ich meine das ging doch irgendwie).
Die Transition wird aber auch nur ausgeführt, wenn sich der entsprechende Wert ändert. Da das hier nicht passiert, findet auch keine Transition statt.

Will heißen:

1.) Schau in deine Browserkonsole.

2.) Mach das nicht über Transitions, das funzt eher nicht, und wenn doch ist es ein Gefrickle.