Ich habe javascript Code verwendet, um die Höhe von div beim Klicken zu erhöhen und zu verringern. Ich möchte aber auch die Eigenschaft für die Übergangsdauer anwenden, damit der Übergang reibungslos verläuft.

Hier ist der CSS-Code

#content {
    height: auto;
    width:400px;
    background-color:#F30;
    transition-duration:2s;
}

#content.expand {
    height: 300px;
    transition-duration:2s;
}

Dies ist der Javascript-Code

function chk()
{
    var node = document.getElementById('content');

    node.classList.toggle('expand');
}

Die Funktion funktioniert ordnungsgemäß. Ich habe die Übergangseigenschaft angewendet, aber das funktioniert nicht.

1
Sahibjot Singh 3 Dez. 2013 im 13:25

3 Antworten

Beste Antwort

Laut Bugzilla ist dies der Bug 571344 .

Der Übergang von und zu auto wirkt sich auf Firefox aus (der überhaupt nicht übergeht ), funktioniert aber auch in anderen Browsern auf eigenartige Weise.

In Chrome wird height: auto beispielsweise beim Übergang wie height: 0 behandelt, und Sie sehen, dass der rote Hintergrund des Beispiels kleiner ist, um zu verschwinden, und dann auf den tatsächlichen "Auto" -Wert zurückgesetzt wird.

Geben Sie einfach eine Höhe an, und es funktioniert in jedem Browser: Demo ausführen

2
Andrea Ligios 3 Dez. 2013 im 10:23

Versuchen Sie eine Cross-Browser-Lösung wie folgt:

 transition-duration:2s; 
 -o-transition-duration:2s; 
 -moz-transition-duration:2s; 
 -webkit-transition-duration:2s;

Statt nur transition-duration:2s;

0
Igle 3 Dez. 2013 im 09:46

Es ist ein Problem mit der Werttransformation, in Mozilla wird -moz-transform vorangestellt.

#content {
    height: auto;
    width:400px;
    background-color:#F30;
    -webkit-transition:all .1s ease;
 -moz-transition:all .1s ease;
 -ms-transition:all .1s ease;
 transition:all .1s ease;
}

#content.expand {
    height: 300px;
   -webkit-transition:all .1s ease;
 -moz-transition:all .1s ease;
 -ms-transition:all .1s ease;
 transition:all .1s ease; 
}
0
Indranil.Bharambe 3 Dez. 2013 im 10:01