XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Animation zurück setzen (http://xhtmlforum.de/showthread.php?t=72724)

seerose 12.03.2016 16:19

Animation zurück setzen
 
Über eine Funktion wird ein Bild aufgezoomt
also von 0 auf 100% vergrößert, das Bild ist ca. 200X200 Pixel groß
über css wird das Bild über transform: scale(0) versteckt
dann über js mit scale(1)" aufgezoomt

Code:

function firefox(){
div_wert="show";
document.getElementById(div_wert).style.transition= "all 400ms cubic-bezier(0.0, 0.0, 0.505, 1.495)"
document.getElementById(div_wert).style.transform = "scale(1)";
 }

Nach 10 Sekunden soll die Animation von vorn beginnen, aber ich must erst mal wieder alles auf Null bringen!!!
Gibt es sowas wie Reset Animation, also was scale wieder auf 0 setzt?

Ich habe versucht eine 2 JS Funktion zu schreiben, die erst mal die Animation auf None setz, dann scale auf 0 , und Animation wieder einschaltet und scale auf 1

Code:

function firefox2(){
div_wert="show_1";
document.getElementById(div_wert).style.transition= "none"                                // Ohne Animation
document.getElementById(div_wert).style.transform = "scale(0)"; // wieder auf 0
  //  jetzt wieder mit Animtion  und aufzommen
//alert ("wait")  mit dem Wait ist alles gut
document.getElementById(div_wert).style.transition= "all 400ms cubic-bezier(0.0, 0.0, 0.505, 1.495)"
document.getElementById(div_wert).style.transform = "scale(1)";
}

Aber hier verschluckt js sich, ich vermute das Scale(0) nicht sofort passiert, ob wohl die Animation
ja über transition= "none" abgestellt ist
ich könnte zwar hinter Scale(0) 20ms warten, dann würde es funktionieren, aber
das würde die Programmierung nur komplizierter machen
zumal js auch keine richtiges Wait anbietet, sonder nur sowas wie window.setTimeout(firefox,20)

protonenbeschleuniger 12.03.2016 19:20

How to Capture CSS3 Animation Events in JavaScript

Ich würde dir raten auf globale Variabeln zu verzichten, das ist hier nicht notwendig und wird früher oder später zu Problemen führen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:42 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019