nicht angemeldet
Wie Transition auslösen?
0 0 0 0 0 0 0 0 0 0 0 2 0 Danke!
0
0
0
0
Wie Transition auslösen?
Hallo,
ich habe einen Farbbalken als DIV im CSS zunächst mit der Breite 0px beschrieben:
#balken_yellow {
height:20px;
width:0px;
background: rgb(254,252,234);
background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 48%, rgba(254,252,234,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(48%,rgba(241,218,54,1)), color-stop(100%,rgba(254,252,234,1)));
background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 48%,rgba(254,252,234,1) 100%);
background: -o-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 48%,rgba(254,252,234,1) 100%);
background: -ms-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 48%,rgba(254,252,234,1) 100%);
background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 48%,rgba(254,252,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#fefcea',GradientType=0 );
transition: width 2.8s linear;
-moz-transition: width 2.8s linear; /* Firefox 4 */
-webkit-transition: width 2.8s linear; /* Safari and Chrome */
-o-transition: width 2.8s linear; /* Opera */
Wie muss ich das DIV-Element angeben, damit es beim ersten Anzeigen die Animation auslöst?
<div id="balken_yellow" style="width:140px;"></div>
Funktioniert leider nicht, zumindest passiert nichts.
Und auch per Javascript im Anschluss
document.getElementById("balken_yellow").style.width = "70px";
tut sich nichts.
-
Hi,
ich glaube du willst keine CSS-Transition sondern eine -Animation.
~dave
-
Hi dave,
eine CSS Transition ist der animierte Übergang von einem Style-Eigenschaft-Wert zu einem anderen.
Insofern ist jede CSS-Transition auch eine Animation.Klaus
-
Hi,
nunja, du setzt die Breite von Anfang an auf 150px per inline Style. Wo ist da eine Änderung eines Wertes?
Wenn du nachträglich mittels z.b. Javascript den Wert änderst siehst du auch die Transition.
Wenn "jede CSS-Transition auch eine Animation" ist, warum gibt's dann in CSS beides extra?
~dave
-
Nunja, ich setze das erste Mal die Breite bei der CSS-Definition. Und dann gleich anschließend wieder durch den Style-Tag.
Wenn das zu schnell gegangen sein sollte, bzw. gleichzeitig, dann sollte es doch spätestens beim anschließenden Javascript-Aufruf passieren oder?
Denn egal ob die Breite jetzt noch 0px durch die CSS-Angabe oder 140px durch die Style-Angabe ist, mit dem Setzen der Breite auf 70px sollte dann doch etwas passieren, oder nicht?Klaus
-
-
Ich habe gerade festgestellt, dass der Javascript-Teil gar nicht ausgeführt wird. Daher natürlich dann auch keine Transition.
Jetzt muss ich erstmal herausfinden, warum da Javascript nicht ausgeführt wird.
Danke erstmal.
-
Sehr merkwürdig....
baue ich vor der Änderung ein alert("test"); ein, dann geht es. Ohne die Alert-Box findet keine Transition statt.
//alert("test"); abalken = z.split(","); document.getElementById("balken_black").style.width = abalken[0]+"px";Hat da jemand eine Idee oder muss ich noch einen Timer starten, der erst nach 2 Sekunden die Style-Änderung durchführt?
-
Hi,
baue ich vor der Änderung ein alert("test"); ein, dann geht es. Ohne die Alert-Box findet keine Transition statt.
Dann gibt es vermutlich zu dem Zeitpunkt, wo du dein Script ausführen lässt, das Element auf das du zugreifen willst, noch gar nicht.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Dann gibt es vermutlich zu dem Zeitpunkt, wo du dein Script ausführen lässt, das Element auf das du zugreifen willst, noch gar nicht.
Das hatte ich getestet, daran liegt es nicht, es gibt auch keine Fehlermeldung. Außerdem wird das Element ja verändert.
Nachdem Klaus die Idee mit dem timer anbrachte habe ich mal getestet:
<html> <head> <style type="text/css"> .balken_yellow_preload { height:20px; width:20px; overflow:hidden; background: rgb(255,255,0); transition: width .5s linear; -moz-transition: width .5s linear; /* Firefox 4 */ -webkit-transition: width .5s linear; /* Safari and Chrome */ -o-transition: width .5s linear; /* Opera */ } /* #balken_yellow:hover { width:140px; }*/ .balken_yellow_load { height:20px; width:140px; overflow:hidden; background: rgb(255,255,0); transition: width .5s linear; -moz-transition: width .5s linear; /* Firefox 4 */ -webkit-transition: width .5s linear; /* Safari and Chrome */ -o-transition: width .5s linear; /* Opera */ } </style> </head> <body> <div id="balken_yellow" class="balken_yellow_preload" onmouseover="this.style.width='140px'" onmouseout="this.style.width='10px'">Balken</div> </body> <script type="text/javascript"> window.setTimeout("start()", 1); // unzuverlässig mit 0 function start() { // document.getElementById('balken_yellow').style.width='140px'; document.getElementById('balken_yellow').setAttribute('class','balken_yellow_load'); // beide Varianten gehen! } </script> </html>-
Mit dem Timer funktioniert es tatsächlich. Selbst nach 1 Millisekunde.
Mir ist nicht klar, warum es nicht funktioniert, denn zum Einen ist das CSS
längst geladen, da der Inhalt für den Balken mit dem Transistion-Effekt erst nach einer User-Aktion über Ajax geladen wird und zum Anderen wird erst die Rückgabe des Ajax-Request in das Container-Div geschrieben, bevor anschließend die Breiten-Angaben verändert werden.Also sollten längst alle Elemente bekannt sein, zumal er auch keine Fehlermeldung ausspuckt, was der Fall wäre, sollte ein Element tatsächlich noch nicht bekannt sein.
Naja, ich werd wohl erstmal mit der Timer-Funktion leben, bis die Erleuchtung kommt (oder jemand anderes leuchtet)
Klaus
-
Mir ist nicht klar, warum es nicht funktioniert,
Ja. Mir auch nicht. Wieso das onload nicht funktioniert, aber bei jedem anderen Event (inklusive dem Timer) - ich habe sogar getestet, ob es in dem Verpacken in eine Funktion liegt - das ist auch nicht der Fall.
Naja, ich werd wohl erstmal mit der Timer-Funktion leben, bis die Erleuchtung kommt (oder jemand anderes leuchtet)
Ja, mir der Lösung kann man wohl leben. Mir gefällt aber ebenso wenig wie Dir, dass ich um das "warum" nicht weis.
Fred
-
Hi,
Mir ist nicht klar, warum es nicht funktioniert, denn zum Einen ist das CSS
längst geladen, da der Inhalt für den Balken mit dem Transistion-Effekt erst nach einer User-Aktion über Ajax geladen wird und zum Anderen wird erst die Rückgabe des Ajax-Request in das Container-Div geschrieben, bevor anschließend die Breiten-Angaben verändert werden.Das liegt daran, dass das Element erst gerendert wird, wenn deine JavaScript-Operation abgeschlossen ist.
Element einfügen und direkt danach die „neue“ Breite setzen = Element wird gleich mit der vermeintlich neuen Breite gerendert, ergo findet keine Veränderung statt, die die Transition auslösen könnte.Mit setTimeout startet du einen neuen Ausführungskontext – der alte wird erst mal beendet, damit die Kontrolle an die Rendering-Engine zurück gegeben, und das Element mit der ursprünglichen Breite gerendert. Und der zeitversetzte Aufruf des Breite-Änderns ändert dann anschließend *tatsächlich* die Elementbreite.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Das liegt daran, dass das Element erst gerendert wird, wenn deine JavaScript-Operation abgeschlossen ist.
Element einfügen und direkt danach die „neue“ Breite setzen = Element wird gleich mit der vermeintlich neuen Breite gerendert, ergo findet keine Veränderung statt, die die Transition auslösen könnte."Ah jetzt ja!"
Dafür bekämst Du ein "hilfreich", wenn ich es denn vergeben könnte.
fred
-
Das liegt daran, dass das Element erst gerendert wird, wenn deine JavaScript-Operation abgeschlossen ist.
Element einfügen und direkt danach die „neue“ Breite setzen = Element wird gleich mit der vermeintlich neuen Breite gerendert, ergo findet keine Veränderung statt, die die Transition auslösen könnte.Mit setTimeout startet du einen neuen Ausführungskontext – der alte wird erst mal beendet, damit die Kontrolle an die Rendering-Engine zurück gegeben, und das Element mit der ursprünglichen Breite gerendert. Und der zeitversetzte Aufruf des Breite-Änderns ändert dann anschließend *tatsächlich* die Elementbreite.
Auch von mir ein dickes Danke für die Erleuchtung.
-
-
Hallo,
Naja, ich werd wohl erstmal mit der Timer-Funktion leben, bis die Erleuchtung kommt (oder jemand anderes leuchtet)
Das Script-Tag darf nicht außerhalb von HEAD und BODY vorkommen. Wenn du es nach dem BODY schreibst, mach der Browser wahrscheinlich eine Fehlerkorrektur und setzt das Script möglicherweise in den HEAD.
Warum eigentlich so kompliziert?
<!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> .balken_yellow { height:20px; width:20px; overflow:hidden; background: rgb(255,255,0); transition: width .5s linear; -moz-transition: width .5s linear; /* Firefox 4 */ -webkit-transition: width .5s linear; /* Safari and Chrome */ -o-transition: width .5s linear; /* Opera */ } .balken_yellow:hover { width:140px; } </style> </head> <body> <div id="balken_yellow" class="balken_yellow">Balken</div> </body> </html>Viele Grüße Novi
--
"(...) deshalb mag ich Binärtechnik. Da gibt es nur drei Zustände: High, Low und Kaputt." (Wau Holland)
-
-
Hi,
Dann gibt es vermutlich zu dem Zeitpunkt, wo du dein Script ausführen lässt, das Element auf das du zugreifen willst, noch gar nicht.
Das hatte ich getestet, daran liegt es nicht, es gibt auch keine Fehlermeldung. Außerdem wird das Element ja verändert.
Da hat ich Klaus mit seiner Formulierung, dass das JavaScript „nicht ausgeführt“ würde, in die Irre gelockt.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Da hat ich Klaus mit seiner Formulierung, dass das JavaScript „nicht ausgeführt“ würde, in die Irre gelockt.
JaNee schonklar. Es ist mit allem Verlaub verwirrend. Mit demTimer geht es - ohne diesen verweigert es die Transition und geht einfach in den Endzustand.
Fred
-
-
-
-
-
-
-
-
-
-
-
Ist das Dein Problem?
<html> <head> <style type="text/css"> .balken_yellow_preload { height:20px; width:20px; overflow:hidden; background: rgb(255,255,0); transition: width .5s linear; -moz-transition: width .5s linear; /* Firefox 4 */ -webkit-transition: width .5s linear; /* Safari and Chrome */ -o-transition: width .5s linear; /* Opera */ } /* #balken_yellow:hover { width:140px; }*/ .balken_yellow_load { height:20px; width:140px; overflow:hidden; background: rgb(255,255,0); transition: width .5s linear; -moz-transition: width .5s linear; /* Firefox 4 */ -webkit-transition: width .5s linear; /* Safari and Chrome */ -o-transition: width .5s linear; /* Opera */ } </style> </head> <body> <div id="balken_yellow" class="balken_yellow_preload" onmouseover="this.style.width='140px'" onmouseout="this.style.width='10px'">Balken</div> </body> <script type="text/javascript"> //document.getElementById('balken_yellow').style.width='140px'; // (geht im FF 16 nur ohne Transition) //document.getElementById('balken_yellow').setAttribute('class','balken_yellow_load'); // (geht im FF 16 nur ohne Transition) </script> </html>