Width vom Bild beim Aufruf auf Endgröße animieren?

[Klaus]

Hallo,

ich erzeuge ein waagerecht verlaufenes Balkendiagramm, indem ich ein Bild mit nur einem Pixel Breite um den (über PHP) errechneten Wert in die Breite ziehe:

  
<img src="bilder/grafik.jpg\" width=<?=$bildlaenge;?> height="8" />  

Wie muss ich die CSS-Eigenschaften setzen, damit beim Seitenaufruf dieser Balken bis zur Endbreite wächst?

Also ähnlich wie bei Fiddle-Beispiel, nur nicht erst beim Hover, sondern die Animation startet direkt.

Klaus

[Quincunx]

Hallo Klaus,

so einfach kann es gehen…

gruesse qx

[M.]

Mahlzeit,

so einfach kann es gehen…

Welche Browser nimmst du zum Testen?
Dein Beispiel startet im Chrome immer noch erst beim Hover. Wenns bei dir klappt, vermute ich ein Browserproblem.

[Klaus]

so einfach kann es gehen…

Welche Browser nimmst du zum Testen?
Dein Beispiel startet im Chrome immer noch erst beim Hover. Wenns bei dir klappt, vermute ich ein Browserproblem.

Nicht nur, dass das Teil nur beim Hover startet, hier wird auch die Höhe mitverändert.

Es ist gewollt, dass sich _nur_ die Breite ändert, die Höhe muss immer konstant bleiben.
Und es muss direkt starten, nicht erst bei einem Hover.

[M.]

Mahlzeit,

Es ist gewollt, dass sich _nur_ die Breite ändert, die Höhe muss immer konstant bleiben.
Und es muss direkt starten, nicht erst bei einem Hover.

Vielleicht hilft dir der Ansatz weiter ;)

[Klaus]

Es ist gewollt, dass sich _nur_ die Breite ändert, die Höhe muss immer konstant bleiben.
Und es muss direkt starten, nicht erst bei einem Hover.

Vielleicht hilft dir der Ansatz weiter ;)

Das sieht schon recht gut aus, allerdings wird die Endgröße im CSS vorgegeben und die ist mir ja da nicht bekannt, da die tatsächliche Breite erst beim Seitenaufbau (über PHP) berechnet wird.

Muss ich hier eine Javascript-Funktion lösen, die dann die Breite ändert?
also sowas ähnliches wie:

  
img.animateit {  
    -webkit-animation: balken 5s;  
    animation: balken 5s;  
}  

  
<img id="test" class="animateit" src="bild.jpg" width="1" height="100" />  

  
<script type="text/javascript" language="javascript">  
getElementById('test').width="500px";  
</script>  

Ich vermute, das funktioniert nicht, weil das Javascript erst ausgeführt werden dürfte, wenn die Seite fertig geladen wurde.
Also die ID des Image und die End-Breite in ein Javascript-Array und eine Funktion beim onLoad-Event aufrufen, die dann das Array abarbeitet?
Das klingt ziemlich umständlich :-//

Klaus

[1UnitedPower]

Meine Herren!

Als Faustregel für den Einsatz von CSS-Animationen oder -Transitionen kann man sagen, dass Animationen immer dann geeignet sind, wenn die Bewegung automatisch ablaufen soll. Transitionen benutzt man dagegen, wenn man einen eigenen Auslöser braucht. Zum Beispiel eine Benutzerinteraktion.

Eine Animation ist für dich also genau die richtige Wahl.

Das sieht schon recht gut aus, allerdings wird die Endgröße im CSS vorgegeben und die ist mir ja da nicht bekannt, da die tatsächliche Breite erst beim Seitenaufbau (über PHP) berechnet wird.

Für den Fall kannst du relative Maßangaben benutzen: % bietet sich hier an.

[Klaus]

Meine Herren!

Was sollen denn die möglichen Damen nur sagen ;-))

Als Faustregel für den Einsatz von CSS-Animationen oder -Transitionen kann man sagen, dass Animationen immer dann geeignet sind, wenn die Bewegung automatisch ablaufen soll. Transitionen benutzt man dagegen, wenn man einen eigenen Auslöser braucht. Zum Beispiel eine Benutzerinteraktion.

Eine Animation ist für dich also genau die richtige Wahl.

Das sieht schon recht gut aus, allerdings wird die Endgröße im CSS vorgegeben und die ist mir ja da nicht bekannt, da die tatsächliche Breite erst beim Seitenaufbau (über PHP) berechnet wird.

Für den Fall kannst du relative Maßangaben benutzen: % bietet sich hier an.

relative Angaben lösen das Problem auch nicht.
Ich erzeuge ja ein waagerecht verlaufenes Balkendiagramm.
Die Länge des Balken entspricht der Länge der Grafik.
Wenn ich also beispielsweise die User / Kernel / IOWait und Idle-Time eines Systems grafisch darstellen möchte, die ich aus einer Textdatei übermittelt bekomme,
dann ergeben sich jedesmal gegebenenfalls völlig andere Werte, die ich nicht in Prozent darstellen kann.

Ich habe es jetzt etwas anders gelöst (und es funktioniert):

• Im Body ein Onload="start_animation()"
• Im Img-Tag eine eindeutige ID (fängt aber immer mit "A_" an), die CSS-Klasse und das zweckentfremdete ALT-Attribut

  
<img class="fadein" ID="A_IDLE" src="bild.jpg" width="1" height="8" alt="<?=$calculated_width;?>">  

• im CSS

  
	img.fadein {  
		-webkit-transition: width ease 2.5s;  
		transition: width ease 2.5s;  
	}  

• und die Javascript-Funktion:

  
	function start_animation() {  
		// hole alle img-Tags  
		var allMyPrettyImgs = document.getElementsByTagName('img');  
		for(var i = 0; i < allMyPrettyImgs.length; i++) {  
			imgid = allMyPrettyImgs[i].id;  
			if (imgid.indexOf("A_")==0) {		// wir wollen nur die IMGs, die mit "A_" anfangen  
				// Wert aus ALT-Tag holen  
				imgobj = allMyPrettyImgs[i];  
				wert = imgobj.alt;  
				imgobj.width = wert;  
			}  
		}  
	}  

Klaus

[1UnitedPower]

Meine Herren!

Für den Fall kannst du relative Maßangaben benutzen: % bietet sich hier an.

relative Angaben lösen das Problem auch nicht.

Relative Maßangaben beziehen sich ja auf etwas. In diesem Fall auf die Breite des Eltern-Elements. Du hättest also auch einfach dem Eltern-Element eine feste Breite geben können und im Stylesheet hättest du abstrakt Prozent-Angaben verwenden können.

Dann wäre die Kopplung etwas loser gewesen und den JavaScript-Teil hätte man vermeiden können. Auf M.s Beispiel übertragen.

Statt das alt-Attribut zu missbrauchen kannst du übrigens auch custom-Attribute selber schaffen: <img data-width="42" src="...">

So oder so bleibt natürlich eine unschöne Mischung von Geschäftslogik und Darstellung bestehen. Wenn Code-Eleganz auch eine gewisse Rolle spielt, würde ich hier ansetzen und mir überlegen, wieso PHP überhaupt die finale Breite des Diagramms berechnen muss.

[Klaus]

Moin
Auf M.s Beispiel übertragen.

Dein Beispiel funktioniert auch noch nicht korrekt, da as Bild nach dem Wachsen wieder auf die Start-Größe zurückspringt.

Statt das alt-Attribut zu missbrauchen kannst du übrigens auch custom-Attribute selber schaffen: <img data-width="42" src="...">

Vielen Dank für den Hinweis. Ich werde meinen Quellcode dahingehend nochmal ändern.

So oder so bleibt natürlich eine unschöne Mischung von Geschäftslogik und Darstellung bestehen. Wenn Code-Eleganz auch eine gewisse Rolle spielt, würde ich hier ansetzen und mir überlegen, wieso PHP überhaupt die finale Breite des Diagramms berechnen muss.

Wie ich eingangs schon beschrieben hatte, lese ich mittels PHP eine Quelle aus. Das kann eine DB (z.B MySQL) oder auch eine Textdatei sein.
Die in der Quelle stehenenden Werte sind variable und können sich jede Minute grundlegend ändern.
Ich wüsste nicht, wie das ohne PHP gehen soll.

Klaus

[M.]

Mahlzeit,

Dein Beispiel funktioniert auch noch nicht korrekt, da as Bild nach dem Wachsen wieder auf die Start-Größe zurückspringt.

Na dann musst du am Ende der Animation das Bild auf die Endgrösse setzen. Das solltest du, mit ein wenig Nachlesen, alleine schaffen.

[1UnitedPower]

Meine Herren!

Moin
Auf M.s Beispiel übertragen.

Dein Beispiel funktioniert auch noch nicht korrekt, da as Bild nach dem Wachsen wieder auf die Start-Größe zurückspringt.

Das überlasse ich dir zur Übung ;)

Wie ich eingangs schon beschrieben hatte, lese ich mittels PHP eine Quelle aus. Das kann eine DB (z.B MySQL) oder auch eine Textdatei sein.

Und was steht da in der Datenbank was mit in die Berechnung der Breite mit einfließt? Die Zutaten sollten bestehen aus einem Wertebereich, einem Zielbereich, einer Abbildung (zum Beispiel linear oder logarithmisch). Wenn du die verrätst, könnte man überlegen, wie man die Breite auch auf dem Client berechnen kann. Spoiler: Es wird auf jedenfall eine höhere Komplexität nach sich ziehen, als das bis jetzt der Fall ist.

[M.]

Mahlzeit,

Das sieht schon recht gut aus, allerdings wird die Endgröße im CSS vorgegeben und die ist mir ja da nicht bekannt, da die tatsächliche Breite erst beim Seitenaufbau (über PHP) berechnet wird.

Ob es eine andere Lösung gibt, weiss ich nicht, aber ich würde einen Ladebalken so lösen:

Wenn die Seite aus mehreren Teilen besteht, lade ich die Teile nacheinander per Ajax nach.
Jedesmal wenn ein Teil geladen wurde, wird der Balken verlängert. Allerdings halte ich sowas nur für bedingt sinnvoll, weil extram JS-lastig.

Und würde eine Ladeanimation nehmen wie die "Sanduhr" (ist ja keine mehr) bei Windows oder Linux.
Der User sieht, da wird was nachgeladen und wird merken, wenns fertig ist.

Ist auch möglich, dass es eine bessere Möglichkeit gibt, ich bin mehr der Backend-Programmierer und stelle immer wieder fest, dass mein Wissen über HTML5 und CSS3 lückenhaft ist ;)

[Matthias Apsel]

Om nah hoo pez nyeetz, Klaus!

ich erzeuge ein waagerecht verlaufenes Balkendiagramm, indem ich ein Bild mit nur einem Pixel Breite um den (über PHP) errechneten Wert in die Breite ziehe:

Vielleicht wäre das progress-Element etwas für dich?

Matthias

[Klaus]

Hallo Matthias,

Vielleicht wäre das progress-Element etwas für dich?

für den Fall vielleicht nicht, aber ich werde mir das in jedem Fall im Hinterkopf behalten.
Der Progress-Bar sieht tatsächlich ganz nett aus.

Klaus