Roadster: Management von CSS Animationen mittels JavaScript

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!

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.

Das ist mir grundsätzlich auch gelungen, aber leider nicht so, wie ich mir das erhofft hatte!
Denn nach meinen bisherigen Bemühungen habe ich nur die Qual der Wahl zwischen zwei Optionen:

1. Ich lasse die "ersten" drei Boxen mit display:none >abrupt< verschwinden, setze die "zweiten" drei Boxen auf display:inline und starte deren Animation, welche sie von außerhalb des
Browserfensters an ihren vorbestimmten Platz gleiten lässt (das klappt wunderbar) oder aber

2. ich setze die nach dem Laden der Seite bei 50% gestoppte Animation der "ersten" drei Boxen fort, die dafür sorgt, dass diese genauso geschmeidig wieder aus dem Browserfenster herausgleiten,
wie sie hineingekommen sind - allerdings um den Preis, dass das zweite Set Boxen nicht geladen
wird!

Mein Ziel ist es, dass ein click auf eine Box dazu führt, dass das erste 3-Boxen-Set seine pausierte Animation wieder aufnimmt, zu Ende führt und (mittels display:none) verschwindet, und erst danach das zweite Boxen-Set auf display:inline schaltet und seine Animation startet, die es
von außerhalb des Browserfensters an den entsprechenden Platz gleiten lässt.

Alle Versuche, die verschiedenen Funktionen mit onclick="#" oder EventListener, setTimeout oder mit was auch immer unter einen Hut zu bringen, sind kläglich gescheitert! Die einzige Lösung, die ich sehe ist, mit <div id="box1" onclick="#()"> <script>funktion #() {...style.animationPlayState = "running"></script> die Animation (iteration = 1) der ersten drei Boxen weiterlaufen zu lassen, und alle weiteren für den Vorgang nötigen Funktionen vom "Erfolg" dieser Operation abhängig zu machen, und eben nicht von dem "click" auf das div-Element ansich!

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.

Wenn jemand eine Idee hat, wie ich dieses Problem lösen kann, sei ihm (oder ihr) mein Dank sicher!

Gruß,

Roadster.

  1. 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">

    1. Hi Gregor!

      Tausend Dank für den Tipp, auch wenn es vermutlich noch etwas dauern wird, bis ich verstanden
      habe, wie das genau funktioniert! ;-)

      Mein Code ist natürlich kein Geheimnis (Aber für jemand der Ahnung von der Materie hat,
      wahrscheinlich eine Qual zu lesen!):

      --HTML--

      <!DOCTYPE HTML>  
      <html lang="de-formal">  
       <head>  
        <title>Index</title>  
         <meta charset="UTF-8">  
         <meta http-equiv="X-UA-Compatible" content="IE=edge">  
         <meta http-equiv="expires" content="0">  
         <meta name="viewport" content="width=device-width,  
                     initial-scale=1.0, user-scalable=yes">  
         <meta name="author" content="Roadster">  
         <meta name="description" content="Index">  
        <link rel="shortcut icon" href="Grafiken/ICON.ico"  
      	     type="image/vnd.microsoft.icon">  
         <link rel="stylesheet" href="code/css/stylesbodysrt.css">  
       </head><body>  
       <script type="text/javascript">  
        function startstop1() {document.getElementById("startleft").style.animationPlayState = "paused";};  
        window.setTimeout("startstop1()", 3000);  
        function startstop2() {document.getElementById("startright").style.animationPlayState = "paused";};  
        window.setTimeout("startstop2()", 2000);  
        function startstop3() {document.getElementById("leftframe").style.animationPlayState = "paused";};  
        window.setTimeout("startstop3()", 4400);  
        function startstop4() {document.getElementById("centerframe").style.animationPlayState = "paused";};  
        window.setTimeout("startstop4()", 3400);  
        function startstop5() {document.getElementById("rightframe").style.animationPlayState = "paused";};  
        window.setTimeout("startstop5()", 3300);  
       </script>  
        <div ID="bodyframe">  
         <div ID="content">  
          <div ID="startframe">  
           <div ID="startleft" onload="startstop1()">  
           <h4><strong>Information</strong></h4>  
           <div ID="infofeld">  
            <h4><strong>Headline</strong></h4>  
             <p>Infotext</p>  
            </div>  
           </div>  
           <div ID="startright" onload="startstop2()">  
            <h4><strong>Suche placeholder</strong></h4>  
            <div ID="srsuche">  
             <form action="#">  
        	<label>Suche</label>  
      	 <input name="Eingabe" type="text">  
             </form>  
            </div>  
           </div>  
          </div>  
          <div ID="main">  
           <div ID="mainleft">  
            <div ID="leftframe" onload="startstop3()">  
             <img ID="ofrbanpic" src="Grafiken/ofrbanpic.png">  
             <h4><strong>leftframe</strong></h4>  
            </div>  
            <div ID="leftfr1">  
             <img ID="allprivr" src="Grafiken/allprivr.png">  
             <h4><strong>leftfr1</strong></h4>  
            </div>  
            <div ID="centerframe" onload="startstop4()" onclick="centercl()">  
             <img ID="zvrbanpic" src="Grafiken/zvrbanpic.png">  
             <h4><strong>centerframe</strong></h4>  
            </div>  
            <div ID="centerfr1">  
             <img ID="sndprivr" src="Grafiken/sndprivr.png">  
             <h4><strong>centerfr1</strong></h4>  
            </div>  
           </div>  
           <div ID="mainright">  
            <div ID="rightframe" onload="startstop5()">  
             <img ID="strbanpic" src="Grafiken/strbanpic.png">  
             <h4><strong>rightframe</strong></h4>  
            </div>  
            <div ID="rightfr1">  
             <img ID="zivprzr" src="Grafiken/zivprzr.png">  
             <h4><strong>rightfr1</strong></h4>  
            </div>  
           </div>  
          </diV>  
         </div>  
        </div>  
      </body>  
      </html>
      

      --CSS-- (Nur ein Ausschnitt, da das viel zu lang ist und ich hier nicht alles zubomben will!)

        
      html {color: black;  
            background: -webkit-linear-gradient(90deg, #3C5064, #7092BE);  
            background: -moz-linear-gradient (90deg, #3C5064; #7092BE);  
            background: -o-linear-gradient(90deg, #3C5064, #7092BE);  
            background: linear-gradient(90deg, #3C5064, #7092BE);  
            font-family: Helvetica, Arial, sans-serif;  
            margin: 0; padding: 0;}  
        
      #bodyframe {position: inline;  
      	    margin-top: 20px;  
      	    padding: 0px;  
      	    min-height: 630px;  
      	    max-height: auto;  
      	    min-width: 930px;  
      	    max-width: auto;  
      	    border: 0px dashed silver;  
      	    text-align: center;  
      	    color: white;  
      	    background-color: transparent;  
      	    border-collapse: collapse;  
      	    z-index: 1;}  
      #bodyframe {-webkit-animation-name: bodyfadein;  
                  animation-name: bodyfadein;  
                  -webkit-animation-duration: 5.0s;  
                  animation-duration: 5.0s;}  
      	    @-webkit-keyframes bodyfadein {0% {opacity: 0;} 100% {opacity: 1;}}  
      	    @keyframes bodyfadein {0% {opacity: 0;} 100% {opacity: 1;}}  
        
      #content {position: inline;  
      	  margin-top: 1px;  
      	  margin-bottom: 0;  
      	  margin-left: auto;  
      	  margin-right: auto;  
      	  padding: 0;  
      	  min-height: 625px;  
      	  max-height: auto;  
      	  width: 920px;  
      	  border: 0px dashed silver;  
      	  text-align: center;  
      	  color: white;  
      	  background-color: transparent;  
      	  border-collapse: collapse;}  
        
      /* Eine der ersten 3 Boxen */  
        
      #centerframe {position: relative;  
      	      float: right;  
      	      margin: 0px;  
      	      padding: 10px;  
      	      min-height: 255px;  
      	      width: 270px;  
      	      border: 2px solid black;  
      	      border-radius: 5px;  
      	      text-align: center;  
      	      color: white;  
                    background: #3c3c3c;  
        
                    background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);  
        
                    background: -webkit-gradient(linear, left top, left bottom,  
                                color-stop(0%, #3c3c3c), color-stop(100%, #222222));  
        
                    background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);  
        
                    background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);  
        
                    background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);  
        
                    background: linear-gradient(top, #3c3c3c 0%, #222222 100%);  
      	      border-collapse: collapse;}  
      #centerframe {-webkit-animation-name: box4mov;  
                    animation-name: box4mov;  
                    -webkit-animation-duration: 6.4s;  
                    animation-duration: 6.4s;  
                    -webkit-animation-delay: 0s;  
                    animation-delay: 0s;  
                    -webkit-animation-direction: normal;  
                    animation-direction: normal;  
      	      -webkit-animation-play-state: running;  
      	      animation-play-state: running;  
                    -webkit-animation-iteration-count: 1;  
                    animation-iteration-count: 1;  
                    -webkit-animation-timing-function: ease-out;  
                    animation-timing-function: ease-in-out;}  
      	      @-webkit-keyframes box4mov {0% {opacity: 1; right: 1000px; top: 0px;}  
      	 		 	         50% {opacity: 1; right: 0px; top: 0px;}  
      					 75% {opacity: 0.5;}  
      				        100% {opacity: 0; right: 0px; top: 0px;}}  
                    @keyframes box4mov {0% {opacity: 1; right: 1000px; top: 0px;}  
      			         50% {opacity: 1; right: 0px; top: 0px;}  
      				 75% {opacity: 0.5;}  
      				100% {opacity: 0; right: 0px; top: 0px;}}  
      #centerframe {-webkit-transition-duration: 0.3s;  
        
                    transition-duration: 0.3s;  
        
                    -webkit-transition-property: box-shadow;  
        
                    transition-property: box-shadow;  
        
                    -webkit-transform: translateZ(0);  
        
                    transform: translateZ(0);  
        
                    box-shadow: 0 0 1px rgba(0, 0, 0, 0);  
      }  
      #centerframe:hover, #centerframe:focus, #centerframe:active  
                                {  
      box-shadow: 0 0 8px rgba(1, 1, 1, 1.6);  
      }  
        
      /* Quasi die Ersatzbox von der Reservebank - Animation aber nur provisorisch */  
        
      #centerfr1 {position: relative;  
      	    display: none;  
      	    float: right;  
      	    margin: 0px;  
      	    padding: 10px;  
      	    min-height: 255px;  
      	    width: 270px;  
      	    border: 2px solid black;  
      	    border-radius: 5px;  
      	    text-align: center;  
      	    color: white;  
                  background: #3c3c3c;  
        
                  background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);  
        
                  background: -webkit-gradient(linear, left top, left bottom,  
                              color-stop(0%, #3c3c3c), color-stop(100%, #222222));  
        
                  background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);  
        
                  background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);  
        
                  background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);  
        
                  background: linear-gradient(top, #3c3c3c 0%, #222222 100%);  
      	    border-collapse: collapse;}  
      #centerfr1 {-webkit-animation-name: box7mov;  
                  animation-name: box7mov;  
                  -webkit-animation-duration: 3.8s;  
                  animation-duration: 3.8s;  
                  -webkit-animation-delay: 0s;  
                  animation-delay: 0s;  
                  -webkit-animation-direction: normal;  
                  animation-direction: normal;  
      	    -webkit-animation-play-state: paused;  
      	    animation-play-state: paused;  
                  -webkit-animation-iteration-count: 1;  
                  animation-iteration-count: 1;  
                  -webkit-animation-timing-function: ease-in-out;  
                  animation-timing-function: ease-in-out;}  
      	    @-webkit-keyframes box7mov {0% {right:1000px; top:0px;}  
      	 		 	       100% {right:0px; top:0px;}}  
                  @keyframes box7mov {0% {right:1000px; top:0px;}  
      			       100% {right:0px; top: 0px;}}  
      #centerfr1 {-webkit-transition-duration: 0.3s;  
        
                  transition-duration: 0.3s;  
        
                  -webkit-transition-property: box-shadow;  
        
                  transition-property: box-shadow;  
        
                  -webkit-transform: translateZ(0);  
        
                  transform: translateZ(0);  
        
                  box-shadow: 0 0 1px rgba(0, 0, 0, 0);  
      }  
      #centerfr1:hover, #centerfr1:focus, #centerfr1:active  
                                {  
      box-shadow: 0 0 8px rgba(1, 1, 1, 1.6);  
      }  
        
      
      

      Tja, schlimmer Wildwuchs, aber wenn's hilft.

      Danke nochmal und Gruß,

      Roadster.

    2. @@Gregor:

      nuqneH

      Du hast schon den richtigen Ansatz.

      Nein.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. Du hast schon den richtigen Ansatz.

        Nein.

        Mag sein, aber ich mag Hunde auch lieber :D. Aber ja, transitions tun es auch

  2. @@Roadster:

    nuqneH

    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.

    Du willst Transitions? (Spec) Und dabei die zweite später starten, nachdem die erste abgelaufen ist?

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)