Elemente fließend ein- / ausblenden

[contras_t]

Hej!

Ich habe hier ein script zum ein- und ausblenden von Elementen:

 function einblenden(div) {  
with(document.getElementById(div).style){  
if(display=="none")  
{  
display="inline-block";  
}  
}  
}  

Diese Aktion möchte ich nun fließend gestalten und möglichst die Dauer definieren können. In einem Script zum fließenden scrollen funktioniert dies mit:

 var duration=500;  

Gibt es da eine simple Lösung?

Ich bin mit JS leider noch nicht so erfahren und finde im Netz nichts passendes.

Danke im Voraus und Liebe Grüße!

[unknown]

http://viralpatel.net/blogs/understanding-jquery-animate-function/

[MudGuard]

Hi,

function einblenden(div) {

with(document.getElementById(div).style){
if(display=="none")
{
display="inline-block";
}
}
}

>   
> Diese Aktion möchte ich nun fließend gestalten und möglichst die Dauer definieren können.  
  
Und wie stellst Du Dir den fließenden Übergang zwischen display:none und display:inline-block vor?  
Was soll z.B. nach einem Drittel der Zeit passiert sein? Soll dann display:inli gelten? Und nach drei Vierteln dann display:inline-bl?  
  
Die Werte von display sind nicht für fließende Übergänge geeignet - entweder gilt der alte, oder der neue, Zwischenstufen gibt es nicht.  
  

> Gibt es da eine simple Lösung?  
  
Für welches Problem? Was soll denn fließend übergehen?  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  

[contras_t]

Und wie stellst Du Dir den fließenden Übergang zwischen display:none und display:inline-block vor?
Was soll z.B. nach einem Drittel der Zeit passiert sein? Soll dann display:inli gelten? Und nach drei Vierteln dann display:inline-bl?

Die Werte von display sind nicht für fließende Übergänge geeignet - entweder gilt der alte, oder der neue, Zwischenstufen gibt es nicht.

Das es keine Zwischenstufen zwischen den einzelnen display-Werten gibt war mir so nicht bewusst, ist aber natürlich verständlich. Danke für den Hinweis!

Ich werde es jetzt über jQuery zu lösen versuchen.

[Beat]

Ich habe hier ein script zum ein- und ausblenden von Elementen:

function einblenden(div) {

with(document.getElementById(div).style){
if(display=="none")
{
display="inline-block";
}
}
}

  
Das finde ich etwas sehr murksig.  
Ein und ausblenden sollte besser durch das schreiben von Klassen geschehen.  
Ich habe dazu extra toggleClass bzw removeClass und addClass in meiner Standard Lib.  
  
Das zweite Problem ist, dass diese Funktion vorgibt zu wissen, was der richtige display-typ für ein sichtbares Element ist. Falls du dein CSS aber ändern musst, musst du zwangsläufig auch diese Funktion ändern.  
  
Auch ist der Funktionsname schlicht falsch. Er sollte heissen:  
  
toggleDisplayTypeNoneToInlineBlockById().  
  

> Diese Aktion möchte ich nun fließend gestalten und möglichst die Dauer definieren können. In einem Script zum fließenden scrollen funktioniert dies mit:  
> ~~~javascript

 var duration=500;  

> 

Gibt es da eine simple Lösung?

Ja, auch diese wäre mit CSS transition zu schreiben.
Du siehst also dass auch dies ein Argument ist, eine Klasse umzuschreiben statt individuelle-styles zu setzen

Ich bin mit JS leider noch nicht so erfahren und finde im Netz nichts passendes.

Ich würde dir eine Bibliothek empfehlen wie JQuery, die dir das setzen und löschen von Klassen einfach machen.

Dein Problem aber bleibt (wie durch Mudguard geschrieben), wie du zwischen Klassen oder diskreten Zuständen fadest. Das kann man nicht. Man kann aber mittels transition die Dimension eines Elements beeinflussen, bevor man es ganz ausblendet.

mfg Beat

[Tabellenkalk]

Hallo,

Auch ist der Funktionsname schlicht falsch. Er sollte heissen:

toggleDisplayTypeNoneToInlineBlockById().

nö, zumindest in dem Ausschnitt, der uns gezeigt wurde, ist kein toggle drin.

Gruß
Kalk

[Gunnar Bittersmann]

@@Beat:

nuqneH

Ich habe dazu extra toggleClass bzw removeClass und addClass in meiner Standard Lib.
[…]
Ich würde dir eine Bibliothek empfehlen wie JQuery, die dir das setzen und löschen von Klassen einfach machen.

Di Methoden dafür gibt’s doch schon in nativem JavaScript: classList. Browserunterstützung nicht schlecht, bis auf IE < 10. Shim gibt’s bei MDN.

Kein Grund, deshalb jQuery einzubinden. (Wenn man das sowieso tut, dann natürlich die jQuery-Methoden nutzen.)

Qapla'

[contras_t]

@@Beat:

nuqneH

Ich habe dazu extra toggleClass bzw removeClass und addClass in meiner Standard Lib.
[…]
Ich würde dir eine Bibliothek empfehlen wie JQuery, die dir das setzen und löschen von Klassen einfach machen.

Di Methoden dafür gibt’s doch schon in nativem JavaScript: classList. Browserunterstützung nicht schlecht, bis auf IE < 10. Shim gibt’s bei MDN.

Kein Grund, deshalb jQuery einzubinden. (Wenn man das sowieso tut, dann natürlich die jQuery-Methoden nutzen.)

Qapla'

CSS transitions wüsste ich nicht anzuwenden, da das Ein bzw Ausblenden per Klick funktionieren soll. Das Thema ist aber abgesehen davon sehr interessant, also trotzdem Danke für den Link ;)

jQuery habe ich schon eingebunden, werde es also darüber versuchen.
Dies hier scheint ein sinnvolles Beispiel zu sein oder gibt es bessere Alternativen?

Danke für Eure Hinweise!

[Gunnar Bittersmann]

@@contras_t:

nuqneH

@@Beat:
[…]
nuqneH

Zitiere bitte sinnvoll, nicht alles.

CSS transitions wüsste ich nicht anzuwenden, da das Ein bzw Ausblenden per Klick funktionieren soll.

Per Klick kann man mit JS Klassen ändern. Den Rest (die Darstellung!) erledigt CSS. Bspw. Transition.

jQuery habe ich schon eingebunden, werde es also darüber versuchen.

Mit »jQuery-Methoden nutzen« meinte ich toggleClass bzw removeClass und addClass; keine darstellungsbezogenen.

Dies hier scheint ein sinnvolles Beispiel zu sein oder gibt es bessere Alternativen?

Ja, s.o.

Gegen Darstellung per JS spricht u.a. auch die Wartbarkeit: Bei späteren Änderungen der Darstellung sollte man lediglich das Stylesheet anpassen müssen, nicht die Programmlogik.

Qapla'

[Gunnar Bittersmann]

@@contras_t:

nuqneH

Gibt es da eine simple Lösung?

Ja, kein JavaScript. Sondern CSS-Transitions. [Spec, Webkrauts, MDN]

Wie MudGuard schon sagte, musst du aber eine Eigenschaft finden, die (quasi-)fließende Übergänge zulässt, also was mit numerischen Werten: opacity, width, height. Wobei letztere problematisch sind, weil man keinen Übergang auto ↔ 0 machen kann. Abhilfe könnten max-width/max-height bringen.

Qapla'

[molily]

Hallo,

width, height. Wobei letztere problematisch sind, weil man keinen Übergang auto ↔ 0 machen kann. Abhilfe könnten max-width/max-height bringen.

Aber wie? Welchen Wert max-Wert wählt man für den sichtbaren Zustand? max-width: none und max-width: max-content bringen dasselbe Problem.

http://codepen.io/molily/pen/CBtql

Dort einen festen Wert vorzugeben kann nicht Sinn der Sache sein.

Mathias

[molily]

Es gibt wohl einen Workaround, bei dem width von 0% auf 100% animiert wird. Es bedarf also eines Wrappers, der die 100% vorgibt.

http://stackoverflow.com/questions/7861648/animate-an-elements-width-from-0-to-100-with-it-and-its-wrapper-being-only-a
http://front-back.com/css-transition-from-a-fixed-px-width-to-an-auto-width

Das lässt sich aber auf mein Beispiel nicht so einfach anwenden.

http://codepen.io/molily/pen/AkqLG

Wenn ich mit max-width: 0% anstatt 0 arbeite, dann nimmt der Wrapper immer Raum ein. Und mit 0 wird zwar die Breite des inneren Elements animiert, aber der Wrapper springt.

Mathias

[JürgenB]

Hallo molily,

Es gibt wohl einen Workaround, bei dem width von 0% auf 100% animiert wird. Es bedarf also eines Wrappers, der die 100% vorgibt.

ich hatte auch mal das Problem, dass ein Element unbekannter Größe bei Mouseover langsam von 0 auf die benötigte Größe wachsen sollte. Ich habe dazu nach dem Laden der Seite das Element eingeblendet (display:block), seine Größe gemessen und dann wieder ausgeblendet. Das hat im Browser noch nicht mal "geflackert".

Gruß, Jürgen

[molily]

Hallo,

ich hatte auch mal das Problem, dass ein Element unbekannter Größe bei Mouseover langsam von 0 auf die benötigte Größe wachsen sollte. Ich habe dazu nach dem Laden der Seite das Element eingeblendet (display:block), seine Größe gemessen und dann wieder ausgeblendet. Das hat im Browser noch nicht mal "geflackert".

Klar, mit JavaScript ist das alles kein Problem und schon tausendfach gelöst. Über offsetWidth/-Height funktionieren ja sämtliche Bibliotheken, die die Größe animieren. Allerdings wurde hier behauptet, CSS-Transitions wären eine »simple Lösung« und es ginge ohne JavaScript. »Wo ist der Nicht-Hilfreich-Button?«™ SCNR. ;)

Natürlich gibt es viele Fälle, wo CSS-Transitions ausreichen. Es gibt aber keine generelle Lösung, die die Flexibilität von jQuery#fadeIn/fadeOut bzw. slideUp/slideDown erreicht, sondern man muss sich im Einzelfall etwas zusammenbasteln. (ich hab’s jedenfalls nicht einfach hinbekommen. Vom Gegenteil lasse ich mich gerne überzeugen.)

Wenn man von 0 zu width: auto animieren will, ist es am robustesten, mit JavaScript die Endgröße auszulesen und später .style.width zu setzen. Die Animation kann dann nativ per CSS-Transition erfolgen. Sinnvollerweise sollte man .style.width nach Ablauf der Animation (transitionend-Event) wieder löschen.

So etwas erledigt jQuery alles von alleine. Will man das selbst nachbauen, merkt man, dass es keine »simple Lösung« gibt, weder mit CSS-Transitions noch mit klassischen JavaScript-Animationen, die Inline-Styles bei jedem Frame ändern.

Mathias