如何为这个不断增长的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高度，而不会影响浏览器兼容性。

检查演示

.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/和低于的代码

删除打开类和切换类型

    $('.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会在顶部获得30像素的间隙，在底部获得20像素的间隙。bottom属性已删除。

兼容性：

• transition属性不太可能需要浏览器前缀。看看这里的浏览器支持。

• calc()得到了广泛的支持，重要的是，包括IE9+的支持。点击此处了解更多信息。要为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>