9

私はアコーディオンで作業してきましたが、何らかの奇妙な理由で次のコード:

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

動作しないようです。高さはアニメーションしません。そして、私はその理由を知りません。

よろしくお願いします。

4

3 に答える 3

14

autoトランジションが高さで発生するのではなく、特定の高さを設定する必要があると思います。

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

デモ

または、ほぼ不可能な max-height のような max-height の別のオプション遷移。

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

デモ2

このページからの引用は次のとおりです。

グラデーションの遷移: すべての CSS プロパティを遷移できるわけではありません。基本的なルールは、絶対値を介してのみ遷移できるということです。たとえば、高さ 0px から自動に移行することはできません。ブラウザは中間遷移値を計算できないため、プロパティの変更は即座に行われます。

于 2013-10-13T03:46:17.490 に答える
0

animate-bodyアニメーションを真に制御するには、その CSS の多くをJQueryに移行する必要がありますanimate-inner:

$(".something").click(function () {
    $("this").nextUntil('.accordion-inner').animate({
        duration: 350,
        specialEase: {
            height: "easeInBounce"
        }
    }, {
        duration: 350,
        specialEasing: {
            height: "easeOutBounce"
        }
    });
});
于 2013-10-13T03:48:20.763 に答える