Javascript 子高度更改时包装器div的过渡高度_Javascript_Jquery_Css

Javascript 子高度更改时包装器div的过渡高度

javascript jquery css

Javascript 子高度更改时包装器div的过渡高度,javascript,jquery,css,Javascript,Jquery,Css,因此，我怀疑CSS3转换并不是这个问题的答案，但以下是我试图实现的目标：在包装器/子div场景中，子div被替换为另一个未知高度的div。这会导致高度突然变化。我希望高度变化平稳过渡，一个la CSS3属性过渡这是垃圾箱：为了解决链路损坏问题，以下是bin的初始代码： # HTML <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-2.1.1.min.js"&g

因此，我怀疑CSS3转换并不是这个问题的答案，但以下是我试图实现的目标：

在包装器/子div场景中，子div被替换为另一个未知高度的div。这会导致高度突然变化。我希望高度变化平稳过渡，一个la CSS3属性过渡

这是垃圾箱：

为了解决链路损坏问题，以下是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);  
});

#HTML
JS-Bin
起初的
新的
#css
.包装纸{
过渡段：高度0.25s缓解0.2s；
}
.孩子{
高度：100px；
宽度：100px；
线高：100px；
文本对齐：居中；
背景：紫色；
颜色：白色；
}
.新的{
显示：无；
高度：200px；
宽度：100px；
线高：100px；
文本对齐：居中；
背景：蓝色；
颜色：白色；
}
#javascript
$（'.wrapper'）。单击（函数（）{
var item=$（'.new'）.css（“显示”、“块”）；
$（'.wrapper'）.html（项目）；
});

我对JS解决方案和CSS都持开放态度。提前谢谢

无法将属性（“显示”无转换为“块”）
为什么要在“wrapper”类之外使用div？添加一个类并更改div的名称可以吗

HTML:

Jquery：

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

示例：

感谢您的回复！1.我不是在转换display属性，而是在转换点。2.在本例中，我将从服务器返回一个全新的对象，我需要将其交换为占位符，因此更改类不是一个选项，尽管这肯定会使它更容易。好的，jquery就是这样：很好！这很聪明，我不知道。答应（）。但是，您仍然需要知道最终的高度。有没有一种方法可以在不知道末端高度的情况下实现这一点？因为我不知道你到底想做什么，所以我看不到这里的大图，也看不到你需要的精确结果，但是如果你不知道高度，并且它将与新对象一起出现，你可以用变量替换200'px'，变量的值将获得新对象的高度。在下一个示例中，我们有一个高度为200‘px’的新对象，我们得到它的高度（在本例中为200‘px’），并将其放入一个变量中。然后我们将新对象的高度设置为子对象的高度（在本例中为动画的起点-100‘px’），单击“包装器”时，新对象将从“包装器”中移除，完成后，将开始动画制作到新对象的原始高度（我们首先设置的变量）示例：

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

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