zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Animation zurück setzen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.03.2016, 16:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
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
  #2 (permalink)  
Alt 12.03.2016, 19:20
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS3 Animation erst beim runter hovern starten Feirell CSS 1 22.03.2015 17:19
Flash Animation bei Responsive Webdesign Mepich (X)HTML 2 16.11.2013 14:44
Diagramm - Animation erstellen! steve46 Javascript & Ajax 16 30.10.2013 13:40
Text ohne Absatz setzen dercoe CSS 25 24.11.2012 20:48
Problem mit Dastellung in IE7 und FF ConiKost CSS 1 05.07.2006 13:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:49 Uhr.