Pourquoi est-transition css ne fonctionne pas lors de l'ajout de la classe à l'aide de javascript / jQuery?

J'ai une boîte de message qui je veux glisser vers le bas sur cliquez sur. Je fais cela par l'ajout d'une classe css à travers Angulaire (et jQuery dans mon exemple). Mais mon CSS transition ne prend pas effet.

Est là de toute évidence une erreur, je suis en train de faire?

Voici mon violon: http://jsfiddle.net/mBKXn/

et mon 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;
}
double possible de jQuery durée pour toggleClass question
double possible de CSS transition de la hauteur: 0; height: auto;

OriginalL'auteur Steven | 2014-01-15

  1. 4

    vous devez définir une hauteur définie. Height:auto ne fonctionne pas car c'est la valeur par défaut valeur de hauteur.

    voir les specs de la propriété height ici:
    http://www.w3.org/TR/CSS2/visudet.html#the-height-property

    http://jsfiddle.net/mBKXn/7/

    .msgShow{
    height: 100%;
}
    vous pouvez définir la hauteur à 100%
    J'ai essayé, mais il a rempli l'ensemble de la div. Mais, si j'ai mis un max.hauteur, à l'aide de 100% fonctionne parfaitement 🙂 Violon: jsfiddle.net/mBKXn/8

    OriginalL'auteur kasper Taeymans

  2. 6

    Pour animer hauteur de 0 à auto, vous devez utiliser max-height à la place:

    .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;
}

    Semble fonctionner: http://jsfiddle.net/mBKXn/3/

    Aussi jeter un oeil à ce question.

    Cela fonctionne, mais il est problématique car une fois que le max-valeur de la hauteur dépasse la hauteur, il n'y a plus visual changements, même si le navigateur continue "animation". Lorsque vous cliquez sur nouveau, il y a une pause marquée, tandis que la valeur de l'anime, le à la hauteur réelle.
    max-height: 100%; devrait être suffisant 😉 jsfiddle.net/mBKXn/6 Mais Pointu qui fait un bon point
    oui mais c'est 100% de la parent de l'élément de hauteur, de sorte que vous obtenez toujours la pause lors du basculement à 0.
    oui, c'est exact, et peut être un problème. Savez-vous comment le résoudre?
    Oui, c'est vrai. Donc, lorsque vous utilisez cette méthode, il faut définir raisonnable max-hauteur (pas de 1000px comme dans mon exemple) afin de réduire l'animation de retard sur le dos de la bascule.

    OriginalL'auteur dfsq

  3. 2

    Un autre (plus vieux IE conforme) façon de le faire est par le biais de slideToggle.

    Mis à jour le Violon qui fonctionne et un autre Violon où j'ai enlevé une partie de votre transition css et elle fait de l'animation plus fluide à mon avis.

    votre code a besoin d'un léger changement:

    $('.test').on('click',function(){
  $('#msgContainer').slideToggle('slow');
});

    et votre classe a besoin d'un léger changement:

    .msg{
    display:none;
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    height: auto;
    width: 100%;
    overflow: hidden;
}
    Cela est également vrai.
    Il fait une transition css à partir de la hauteur 200px à hauteur auto (auto est la cause)
    Mal. Je suis à l'aide de CSS transition qui est de l'animation. Comme Kevin et Kasper points, transition css ne fonctionne pas avec auto hauteur.

    OriginalL'auteur erikrunia