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解决方案，我怎样才能使用j来解决它？

更新
经过大量的调查，似乎使用calc是纯css中唯一的选择不幸的是，我有使用calc的床上体验，尤其是野生动物园和移动设备（浏览器崩溃和其他惊喜）。我现在更愿意避免使用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

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

使用jQuery计算进行演示

＆＃13;

$('.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);
  }

});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如果你改变主意关于calc（）

您需要CSS transition属性以及开放类上的height: calc(100% - 50px)。当打开时，计算器会在顶部产生30px的间隙，在底部产生20px的间隙。 bottom属性已被删除。

兼容性：

transition属性不太可能需要浏览器前缀。 Have a look here用于浏览器支持。
calc()得到了广泛的支持，其中包括IE9 +支持。 More information here。要为IE 8及更低版本提供回退高度，请在旧版浏览器的calc高度之前提供正常高度百分比属性。像height: 70%

这样的东西

仅使用CSS演示

＆＃13;
＆＃13;
$('.inner').click(function() { $(this).toggleClass('open'); });
＆＃13;
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 */ }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div class="container"> <div class="inner"></div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您可以通过更新下面的样式来使用动态高度。在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(){});

});

如何为这个不断增长的div添加转换？

3 个答案:

使用jQuery计算进行演示

如果你改变主意关于calc（）

仅使用CSS演示