个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 12:13:02 32 4
gpt4 key购买 nike

所以我怀疑 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 持开放态度。提前致谢!

最佳答案

  • 你不能转换属性('display' none 到 'block')。
  • 为什么要在“包装器”类之外使用 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;
}

J查询:

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

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

关于javascript - 子高度变化时包装器 div 的过渡高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27022624/

32 4 0
文章推荐： css - 如何在 bootstrap 3 中创建垂直面板列表
文章推荐： html - 填充在 iOS 上似乎无法正确显示
文章推荐： ios - iOS 11 上的 XCode "Unable to parse contraint format"
文章推荐： javascript - JavaScript/React 中的构造函数是必需的吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com