如何为这个不断增长的 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;
}

Answer 2

您可以通过更新下面的样式来使用动态高度。演示http://jsfiddle.net/fL5rLr2y/8/

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

    .inner.open {
        height: calc(100% - 50px); /* top 30px + bottom 20px */

    }

或者你可以使用 jQuery 动画。查看http://jsfiddle.net/8mn90ueb/3/ 的输出和下面的代码

移除 open 类和 toggle 类型

    $('.inner').click(function() {
    var currentHeight = $(this).height();
    if(currentHeight > 50){
        currentHeight = 50;
    }
    else{
      currentHeight = $('.container').height() - 50;
    }
     $(this).animate({
         height:currentHeight
     },1000,function(){});

});

Answer 3

CSS transition 属性是您所需要的。 .inner 的高度计算现在使用 jQuery 进行。

jQuery 计算演示

$('.inner').click(function() {
  var parentHeight = $(this).parent().outerHeight() - 50; // Get parent height - 50px
  var innerHeight = $(this).outerHeight(); // Get inner height
  
  
  // if the inner height = 50px then change height to the parent height calculation
  // otherwise return to 50 height
  if (innerHeight === 50) {
    $(this).height(parentHeight);
  } else {
    $(this).height(50);
  }

});

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;
  transition: height 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="container">
  <div class="inner"></div>
</div>

如果你改变了对 calc() 的看法

CSS transition 属性是您在公开课上与height: calc(100% - 50px) 一起需要的。 calc 在打开时让您在顶部有 30px 的间隙，在底部有 20px 的间隙。 bottom 属性已被删除。

兼容性：

• transition 属性不太可能需要浏览器前缀。 Have a look here 支持浏览器。

• calc() 享有广泛的支持，包括重要的 IE9 + 支持。 More information here。要为 IE 8 及更低版本提供后备高度，请提供一个正常的高度百分比属性在旧版浏览器使用的计算高度之前。类似height: 70%

仅使用 CSS 的演示

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

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;
  transition: height 0.5s;
}
.inner.open {
  height: 70%; /* pick a percentage height for IE 8 and below */
  height: calc(100% - 50px); /* 100% height minus 30px at the top + 20px at the bottom */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="container">
  <div class="inner"></div>
</div>