javascript - 如何为这个不断增长的 div 添加过渡？

Question

我正在尝试向不断增长的 div 添加过渡。
这是一个 jsfiddle:http://jsfiddle.net/fL5rLr2y/
这个 jsfiddle 代表了我现实世界的问题。
我有以下标记:

<div class="container">
    <div class="inner">
    </div>
</div>

以及以下 CSS:

html, body {
    height: 100%; } .container {
    position: relative;
    height: 80%;
    background-color: blue; }

.inner {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    height: 50px;
    background-color: red; }

.inner.open {
    height: initial;
    bottom: 20px; }

这是我的js:

$('.inner').click(function() {
    $(this).toggleClass('open');
});

我正在尝试使用纯 CSS 添加过渡。我该怎么做？纯css解决不了，怎么用js解决？

更新
经过大量调查，似乎使用 calc 是在纯 css 中执行此操作的唯一选择。
不幸的是，我有使用 calc 的经验，尤其是使用 safari 和移动设备(浏览器崩溃和其他意外)。我宁愿暂时避免使用 calc，而是使用 javascript 解决方案来模拟它。
知道怎么做吗？

Answer 1

编辑您的 .inner 和 .inner.open 类，如下所示...您需要将预定高度设置为 .open

如果您打算使用 CSS3 过渡，您可以选择使用 calc() 来确定您的 .open 高度，而不会影响浏览器兼容性。

检查 demo

.inner {
position: absolute;
top: 30px;
left: 0;
right: 0;
height: 50px;
background-color: red;

transition: height 1s;
-webkit-transition: height 1s;
-moz-transition: height 1s;
-ms-transition: height 1s;
    -o-transition: height 1s;
}

.inner.open {
    height: calc(100%-50px);
    bottom: 20px;
}