Warum ist css-übergang funktioniert nicht beim hinzufügen der Klasse mit javascript / jQuery?

Habe ich eine message-box, die ich will, um nach unten rutschen auf klicken Sie auf. Ich tun dies durch hinzufügen einer css-Klasse durch Eckige (und jQuery in meinem Beispiel). Aber meine CSS-übergang nicht wirksam.

Ist es offensichtliche Fehler, die ich mache?

Hier ist mein fiddel: http://jsfiddle.net/mBKXn/

und mein code:

//jQuery
$('.test').on('click',function(){
  $('#msgContainer').toggleClass('msgShow');
});

//HTML
<div class="container">
    <div id="msgContainer" class="msg">
        <p>Message here</p>
        <p>T2</p>
        <p>T4</p>
    </div>
    Test text
</div>

<button class="test">Click</button>

//CSS
.container{
    position: relative;
    height: 200px;
    width: 400px;
    border: solid 1px #222;
}

.msg{
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    height: 0;
    width: 100%;
    overflow: hidden;
    -webkit-transition: height 0.8s linear;
    -moz-transition: height 0.8s linear;
    -o-transition: height 0.8s linear;
    -ms-transition: height 0.8s linear;
    transition: height 0.8s linear;    
}

.msgShow{
    height: auto;
}

mögliche Duplikate von jQuery Dauer für toggleClass-Problem
mögliche Duplikate von CSS-transition-height: 0; height: auto;

InformationsquelleAutor Steven | 2014-01-15

4

müssen Sie eine definierte Höhe. Height:auto funktioniert nicht, da dies der Standard-Wert "Höhe".

finden Sie die Angaben für die height-Eigenschaft hier:
http://www.w3.org/TR/CSS2/visudet.html#the-height-property

http://jsfiddle.net/mBKXn/7/
```
.msgShow{
    height: 100%;
}
```
Sie können die Höhe bis zu 100%
Ich habe versucht, aber es füllte die gesamte div. Aber, wenn ich einen max.Höhe mit 100% funktioniert perfekt 🙂 Fiddle: jsfiddle.net/mBKXn/8

InformationsquelleAutor kasper Taeymans
6

Animieren Höhe von 0, um die automatische verwenden Sie die max-height statt:
```
.msg{
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    max-height: 0;
    width: 100%;
    overflow: hidden;
    -webkit-transition: max-height 0.8s linear;
    -moz-transition: max-height 0.8s linear;
    -o-transition: max-height 0.8s linear;
    -ms-transition: max-height 0.8s linear;
    transition: max-height 0.8s linear;    
}

.msgShow{
    max-height: 1000px;
}
```
Scheint zu funktionieren: http://jsfiddle.net/mBKXn/3/

Werfen Sie auch einen Blick auf diese Frage.

Dies funktioniert, aber es ist problematisch, denn wenn der max-Wert Höhe größer als die Höhe, es sind keine weiteren visual verändert, obwohl der browser weiterhin "animieren". Wenn Sie noch einmal klicken, gibt es eine merkliche pause, während der Wert animiert wird ab, um die tatsächliche Höhe.
max-height: 100%; sollte genug sein 😉 jsfiddle.net/mBKXn/6, Aber Spitz ist ein guter Punkt
ja aber das ist 100% von der Eltern - element Höhe, so dass Sie immer noch die pause beim Umschalten auf 0 zurück.
ya, das ist korrekt und kann ein Problem sein. Wissen Sie, wie Sie es lösen?
Ja, es ist wahr. Also, wenn Sie diese Methode verwenden, sollte man vernünftiger max-Höhe (nicht 1000px-wie in meinem Beispiel) zu reduzieren animation-delay auf der Rückseite Umschalten.

InformationsquelleAutor dfsq
2

Andere (ältere IE-konforme) Möglichkeit, dies zu tun ist durch slideToggle.

Aktualisiert Fiddle funktioniert und ein weiterer Fiddle, wo ich entfernt einige der Ihren übergang css und das macht die animation glatter meiner Meinung nach.

muss der code ein wenig verändert:
```
$('.test').on('click',function(){
  $('#msgContainer').slideToggle('slow');
});
```
Ihrer Klasse benötigen wir noch eine kleine änderung:
```
.msg{
    display:none;
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    height: auto;
    width: 100%;
    overflow: hidden;
}
```
Das ist auch wahr.
Er macht eine css-transition von der Höhe 200px Höhe auto (auto ist die Ursache)
Falsch. Ich bin mit CSS-übergang, ist die animation. Als sowohl Kevin und Kasper weist darauf hin, css-übergang funktioniert nicht mit auto Höhe.

InformationsquelleAutor erikrunia

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.