Pourquoi cette CSS3 transition sur la hauteur ne fonctionne pas

J'ai travaillé dans un accordéon, mais pour une raison étrange, le code suivant:

<style>
    .collapse {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .35s ease;
    -moz-transition: height .35s ease;
    -o-transition: height .35s ease;
    transition: height .35s ease;
    }
    .collapse.in {
    height: auto;
    }
</style>

<div class="accordion">
    <div class="something">
        <a class="" >Accordion Pane 1</a>
    </div>
    <div class="accordion-body collapse">
        <div class="accordion-inner"> content </div>
    </div>
</div>

<script>

$('.something').click(function(event){
    event.preventDefault();
    $(this).next('.accordion-body').toggleClass('in');

})


</script>

http://jsfiddle.net/CvdXK/

ne semble pas fonctionner. La hauteur de ne pas les animer. Et je ne sais pas pourquoi.

Merci beaucoup à l'avance.

OriginalL'auteur MariaZ | 2013-10-13

  1. 14

    Je pense que vous devez définir une hauteur spécifique au lieu de auto pour la transition à se produire sur la hauteur.

    .collapse {
    height: 0;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 1.35s ease;
    -moz-transition: height 1.35s ease;
    -o-transition: height 1.35s ease;
    transition: height 1.35s ease;
    background-color: #cecece;
}
.collapse.in {
    height: 200px; /*Set the height here*/
}

    Démo

    Ou une autre option de transition sur max-hauteur, comme un max de hauteur qui est quasi impossible.

    .collapse {
    max-height:0px;
    position: relative;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease-in-out;
    -moz-transition: max-height 0.35s ease-in-out;
    -o-transition: max-height 0.35s ease-in-out;
    transition: max-height 0.35s ease-in-out;
    background-color: #cecece;
}
.collapse.in {
    max-height:1000px;
}

    Demo2

    Voici une citation de cette page:

    Transition dégradés:
    Pas chaque propriété CSS peut être transféré, et la règle de base est que vous pouvez seulement de transition par le biais de valeurs absolues. Par exemple, vous ne pouvez pas la transition entre une hauteur de 0px auto. Le navigateur ne peut pas calculer l'intermédiaire de transition de valeurs, de sorte que le changement de propriété est immédiat.

    vous avez raison, mais si je veux une dynamique de la hauteur
    je pense que c'est une limitation automatique de la hauteur, comment sur la transition à sur max-hauteur? donner un max-height quelque chose maximale..
    Quelque chose comme ceci jsfiddle.net/nheup Son une limitation animation à la hauteur de l'auto.
    Merci cela fonctionne

    OriginalL'auteur PSL

  2. 0

    Vous avez besoin de déplacer autant de CSS sur JQuery pour réellement contrôler l'animation: (Vous avez animate-body à l'intérieur de animate-inner et je pense que vous avez plus de choses compliquées.

    $(".something").click(function () {
    $("this").nextUntil('.accordion-inner').animate({
        duration: 350,
        specialEase: {
            height: "easeInBounce"
        }
    }, {
        duration: 350,
        specialEasing: {
            height: "easeOutBounce"
        }
    });
});

    OriginalL'auteur DevlshOne

  3. 0

    hauteur de l'attribut doit être définir complusary, pour rendre la surface lisse de transition de page de forme de travail très en premier. peut-être même de 0px. mais il ne doit pas être automatique ou max-hauteur 0px.

    OriginalL'auteur jaskirat Singh