Question

所以我怀疑CSS3过渡不是这个的答案，但这就是我想要实现的目标：

在包装器/子div场景中，子div被替换为不同的未知高度的div。这会导致突然的高度变化。我希望高度变化能够平滑过渡，而CSS3属性会转换。

这是垃圾箱： http://jsbin.com/hakanulodo/9/edit

为了解决链接腐烂问题，这里是bin的初始代码：

# HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper">
    <div class="child">
      Original
    </div>
  </div>
  <div class="new">
    New
  </div>
</body>
</html>

# css
.wrapper {
  transition: height 0.25s ease 0.2s;
}

.child {
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  background: purple;
  color: white;
}

.new {
  display: none;
  height: 200px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  background: blue;
  color: white;
}

# javascript
$('.wrapper').click( function() {
  var item = $('.new').css("display", "block");
  $('.wrapper').html(item);  
});

我对JS解决方案和CSS都很开放。提前谢谢！

Answer 1

您无法转换属性（'display'none to'block'）。
为什么要在'wrapper'类之外使用div？是否可以添加一个类并更改div的名称？

HTML：

<div class="wrapper">
    <div class="child">
      Original
    </div>
</div>

CSS：

.child {
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  background: purple;
  color: white;
  -webkit-transition: height 0.50s ease 0.2s;
  -moz-transition: height 0.50s ease 0.2s;
  transition: height 0.50s ease 0.2s;
}

.new {
  height: 200px;
  background: blue;
}

Jquery的：

$('.child').click( function() {
  $(this).addClass('new').html('New');
});

示例：http://jsbin.com/jivevasawi/1/edit?html,css,js,output

子高度变化时包装div的过渡高度

1 个答案: