CSS3 过渡:将固定页脚或固定页眉扩展到最大大小，而不叠加页眉或页脚

Question

我正在开发一个html5应用程序，其中我有一个固定的页眉和一个固定的页脚。

当我单击页脚时，它应该向上滑动，直到距离页眉 10 像素。

标头也应该发生同样的事情。

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

默认布局的CSS很简单：我只使用顶部和底部的绝对定位。

.header, .footer {
    min-height:25px;
    background:grey;
    position:absolute;
    left:0;
    z-index:5;
    /** transition **/
    transition: all 1s;
}
.header {
    top:0;
    background:red;
}
.footer {
    bottom:0;
    background:yellow;
}
.header.max {
    bottom:35px;
}
.footer.max {
    top:35px;
}

不，它涉及到动画部分。 我不想使用Javascript动画！只有CSS！如果您单击页眉或页脚，我只需将类max添加到元素中：

$(".header, .footer, .content").on("click", function () {
  $(".max").removeClass("max");
  $(this).addClass("max");
});

动画应看起来像页脚从底部展开。

我创建了一个JS-Fiddle。您可以看到，问题恰好出在页脚/页眉的顶部和底部位置。

有没有人知道如何解决这个问题，使动画看起来像页脚从底部扩展？

谢谢！

Answer 1

过渡元素需要设置为高度以获得更流畅的动画效果。 在我的示例中，我将页眉和页脚动画设置为 300px，您需要使用 JS 进行更改以通过 window.height（） 或类似的东西更新 class="max"。

解决 10px 需求的一种方法是加载 getwindow.height（） 减去 10px，然后用最终结果更新 class="max"。

我在你的 CSS 中更改了什么：

.header, .footer {
    min-height:25px;
    background:grey;
    position:absolute;
    left:0;
    z-index:5;
    /** transition **/
    transition:height 2s;
    -webkit-transition:height 2s; /* Safari */
}
.header.max {
   height:300px;
}
.footer.max {
   height:300px;
}

小提琴

http://jsfiddle.net/JSED5/3/