높이 전환이 작동하도록하는 것은 주로 애니메이션 할 높이를 알아야하기 때문에 약간 까다로울 수 있습니다. 이는 애니메이션 할 요소의 패딩으로 인해 더욱 복잡해집니다.

내가 생각해 낸 것은 다음과 같습니다.

다음과 같은 스타일을 사용하십시오.

    .slideup, .slidedown {
        max-height: 0;
        overflow-y: hidden;
        -webkit-transition: max-height 0.8s ease-in-out;
        -moz-transition: max-height 0.8s ease-in-out;
        -o-transition: max-height 0.8s ease-in-out;
        transition: max-height 0.8s ease-in-out;
    }
    .slidedown {
        max-height: 60px ;  // fixed width                  
    }

슬라이딩하는 컨테이너에 패딩 / 여백 / 테두리가 없도록 콘텐츠를 다른 컨테이너로 래핑합니다.

  <div id="Slider" class="slideup">
    <!-- content has to be wrapped so that the padding and
            margins don't effect the transition's height -->
    <div id="Actual">
            Hello World Text
        </div>
  </div>

그런 다음 일부 스크립트 (또는 바인딩 프레임 워크의 선언적 마크 업)를 사용하여 CSS 클래스를 트리거합니다.

  $("#Trigger").click(function () {
    $("#Slider").toggleClass("slidedown slideup");
  });

예 :
http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview

이것은 고정 된 크기의 콘텐츠에 대해 잘 작동합니다. 보다 일반적인 솔루션의 경우 코드를 사용하여 전환이 활성화 될 때 요소의 크기를 파악할 수 있습니다. 다음은이를 수행하는 jQuery 플러그인입니다.

$.fn.slideUpTransition = function() {
    return this.each(function() {
        var $el = $(this);
        $el.css("max-height", "0");
        $el.addClass("height-transition-hidden");
    });
};

$.fn.slideDownTransition = function() {
    return this.each(function() {
        var $el = $(this);
        $el.removeClass("height-transition-hidden");

        // temporarily make visible to get the size
        $el.css("max-height", "none");
        var height = $el.outerHeight();

        // reset to 0 then animate with small delay
        $el.css("max-height", "0");

        setTimeout(function() {
            $el.css({
                "max-height": height
            });
        }, 1);
    });
};

다음과 같이 트리거 될 수 있습니다.

$ ( “# Trigger”). click (function () {

    if ($("#SlideWrapper").hasClass("height-transition-hidden"))
        $("#SlideWrapper").slideDownTransition();
    else
        $("#SlideWrapper").slideUpTransition();
});

다음과 같은 마크 업에 대해 :

<style>
#Actual {
    background: silver;
    color: White;
    padding: 20px;
}

.height-transition {
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
    overflow-y: hidden;
}
.height-transition-hidden {
    max-height: 0;
}
</style>
<div id="SlideWrapper" class="height-transition height-transition-hidden">
    <!-- content has to be wrapped so that the padding and
        margins don't effect the transition's height -->
    <div id="Actual">
     Your actual content to slide down goes here.
    </div>
</div>

예 :
http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview

더 자세한 내용에 관심이 있다면 최근 블로그 게시물에이 글을 썼습니다.

http://weblog.west-wind.com/posts/2014/Feb/22/Using-CSS-Transitions-to-SlideUp-and-SlideDown