Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 12.03.2016, 16:19
seerose seerose ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 86
seerose befindet sich auf einem aufstrebenden Ast
Standard 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)

Geändert von seerose (12.03.2016 um 21:22 Uhr)
Mit Zitat antworten
Sponsored Links