Management von CSS Animationen mittels JavaScript

[Gregor]

Hallo!

Hallo

Ich habe ein für mich offenbar unüberwindbares Problem mit dem Management von CSS Animationen
via JavaScript. Ich muss gestehen, dass obwohl ich mit HTML und CSS recht gut klar komme, ich mit
JavaScript so meine Schwierigkeiten habe und ich hoffe, dass ihr mir hier weiterhelfen könnt!

Schauen wir ma

Das Problem ist also folgendes:

Ich möchte, dass ein click auf ein DIV-Element zwei Folgen nach sich zieht, nämlich erstens,
dass die angeclickte DIV-Box zusammen mit zwei anderen Boxen verschwindet, und zweitens, dass dafür drei andere, gleichgroße DIV-Boxen deren Platz einnehmen.

Mit display zu arbeiten scheint erstmal vernünftig

Fraglich ist halt, wie ich das umsetzen kann. Habe von JavaScript echt kaum Ahnung, aber ich
dachte da an sowas wie if (Animation der ersten div-Boxen ist zu Ende oder bei 99%) {box1,2,3 display: none / box4,5,6 display:inline, box4,5,6 animationPlayState="running" usw...), aber
ich habe keine Ahnung, wie ich als Variable (Bedingung) das Ende des entsprechenden Animationsvorgangs bestimmen kann. Habe schon einiges Versucht, aber das hat alles nicht funktioniert.

Du hast schon den richtigen Ansatz. Da ja keinerlei Quellcode zur Analyse vorliegt wird dir hier auch kaum jemand konkrete Infos geben können. Daher die Theorie:
<style>
.block1 {display:block}
.block2 {display:none}
</style>
<script>
function checkVideoState() {
 //Gehe durch die 3 Elemente
 for(i=1; i<=3; i++) {
  //Wenn eines der Container noch am abspielen ist dan gib true zurück
  if(document.getElementById(i).animationPlayState == "running") {
   return true;
  }
   else {return false;}
 }
}
function toggle() {
var animRunning = checkVideoState();
//Wenn keine Animation mehr dann Block1 none/ Block2 block
if (animRunning == false ) {
        var hidden = document.getElementsByClassName('block2');
        var visible = document.getElementsByClassName('block1');

hidden.style.display = "none";
        visible.style.display = "block";
 }
}
<script>
<a href="#" onlick="toggle()">Klick mich</a>
<div id=1 class="block1">
<div id=2 class="block1">
<div id=3 class="block1">

<div id=4 class="block2">
<div id=5 class="block2">
<div id=6 class="block2">