滑下高度不清楚

Question

我想创建一个向下滑动的动画，但由于高度以百分比给出，我不知道如何。

我尝试在HTML / CSS类min-height中提供open，但这也无济于事。

以下是代码：

CSS：

.hidden 
{
    position:relative;
    height:0px;
    -webkit-transition:height, 0.5s linear;
    -moz-transition: height, 0.5s linear;
    -ms-transition: height, 0.5s linear;
    -o-transition: height, 0.5s linear;
    transition: height, 0.5s linear;
}
.open 
{
    position:relative;
    min-height:200px;
    -webkit-transition:height, 0.5s linear;
    -moz-transition: height, 0.5s linear;
    -ms-transition: height, 0.5s linear;
    -o-transition: height, 0.5s linear;
    transition: height, 0.5s linear;
}

#SummaryWrapperPage
{
    color: #B7B7B7;
    font-family: noto sans;
    font-size: 18px;
    margin-bottom: 50px;
    margin-top:20px;
}

#HeadLineWrapperPage
{
    color: #B7B7B7;
    font-family: noto sans;
    font-size: 32px;
    margin-top: 25px;
}

#ArrowPage
{
    display: none;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    bottom: 61px;
    right: 50%;
    margin-right: -25px;
    cursor: pointer;
}

#VideoWrapperPage
{
    position: relative;
    padding-bottom: 38.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
} 

#VideoWrapperPage iframe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JS：

    function ShowCurrentTime(id) {
        $.ajax({
            type: "POST",
            url: "default.aspx/GetCurrentInformation",
            data: '{ContentID:'+id+'}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            }
        });
    }
    function OnSuccess(response) {
        var obj = jQuery.parseJSON(response.d);
        $("#VideoWrapperPage").html(obj.iframe);

        $("#HeadLineWrapperPage").html(obj.headline);
        $("#SummaryWrapperPage").html(obj.summary);
        $("#AjaxContent").attr('class', 'open');
        $("#ArrowPage").css("display", "block");
        $('html, body').stop().animate({
            'scrollTop': 0
        }, 900, 'swing', function () {

        });

    }
    function BackBoxes() {
        var target = "#boxes";
        $target = $(target);
        $("#VideoWrapperPage").html("");
        $("#HeadLineWrapperPage").html("");
        $("#SummaryWrapperPage").html("");
        $("#AjaxContent").attr('class', 'hidden');
        $("#ArrowPage").css("display", "none");
    }

HTML：

</script>
<div id="AjaxContent" class="hidden">
    <div id="VideoWrapperPage">
    </div>
    <img src="../../../000Frames/site/images/arrow01.png" id="ArrowPage" onclick="BackBoxes();"/>
    <div id="HeadLineWrapperPage">
    </div>
    <div id="SummaryWrapperPage">
    </div>
</div>

感谢您的帮助。

它在隐藏的类切换中工作得很好，但在开放时没有动画。