Warum diese CSS3-übergang auf Höhe funktioniert nicht

Habe ich die Arbeit in einem Akkordeon, aber für einige ungerade Grund, warum der folgende code:

<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/

scheint nicht zu funktionieren. Die Höhe der nicht animieren. Und ich weiß nicht, warum.

Vielen Dank im Voraus.

InformationsquelleAutor MariaZ | 2013-10-13
  1. 14

    Ich glaube, Sie brauchen, um eine bestimmte Höhe statt auto für den übergang zu passieren, auf der Höhe.

    .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*/
}

    Demo

    Oder anderen option übergang auf max-Höhe, wie eine max-Höhe, die in der Nähe unmöglich.

    .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

    Hier ist ein Zitat aus auf dieser Seite:

    Übergang von Farbverläufen:
    Nicht jede CSS-Eigenschaft können umgestellt werden, und die Grundregel ist, dass man nur übergang durch absolute Werte. Zum Beispiel können Sie nicht den übergang zwischen einer Höhe von 0px auf auto. Der browser kann nicht berechnen Sie die intermediate-übergangs-Werte, so dass die änderung der Eigenschaft ist instant.

    • da hast du Recht aber was ist wenn ich eine dynamische Höhe
    • ich denke, es ist eine Einschränkung auf auto Höhe, wie etwa die Umstellung auf max-Höhe? geben Sie eine max-Höhe maximal etwas..
    • So etwas wie dieses, jsfiddle.net/nheup Die eine Einschränkung animieren auf Höhe auto.
    • Vielen Dank das funktioniert
    InformationsquelleAutor PSL
  2. 0

    Müssen Sie zu bewegen, so viel, dass CSS über JQuery, wirklich die Kontrolle der animation: (Du hast animate-body innen animate-inner und ich denke, Sie haben über komplizierte Dinge.

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

    height-Attribut sollte definieren complusary, um die glatte Seite den übergang zur Arbeit form ersten. könnte sogar von 0px. muss aber nicht sein auto "oder" max-Höhe von 0px.

    InformationsquelleAutor jaskirat Singh
Schreibe einen Kommentar