jQuery 添加子项时转换容器的大小

Question

我正在寻找一种方法，当 jQuery 添加一个子项或显示一个隐藏的子项时，为元素（边框）大小的增加设置动画。这 JSFiddle 可能更好地解释了这一点。单击标签显示第二个标签时，分隔线不会立即转换为新大小，有没有办法慢慢转换它？我已经尝试了所有我能想到的 CSS 和 JS 的组合，并在 Stack 上找到了无济于事。感谢帮助！

function load() {
  $("#example").hide();
  $("label").click(function() {
    $("#example").fadeIn();
  })
}

div {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid black;
  font-size: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onload=load()>
  <div>
    <label>Shown</label>
    <label id=example>Addition</label>
  </div>
</body>

Answer 1

如果您希望延迟显示实际元素及其属性 (border)，您可以向 JS 添加一个 setTimeout() 函数代码将延迟您的超时函数中设置的给定时间量，然后它将运行内置 fadeIn jQuery 函数。

您可以添加 CSS 动画并使用 @keyframes 使动画 opacity 淡入，但是这将被限制为 [=41= 中的某些属性] 而已。

如果这不是您想要实现的目标，请告诉我。我使用了您在 JSFiddle 中链接到的示例代码。

function delayFade(time) {
  setTimeout(() => $("#example").fadeIn(), time);
}

function load() {
  $("#example").hide();
  $("label").click(() => delayFade(1500));
}

div {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid black;
  font-size: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onload=load()>
  <div>
    <label>Shown</label>
    <label id=example>Addition</label>
  </div>
</body>

Answer 2

您可以使用 .slideToggle() - 这会随着父 div 尺寸的增加而向下滑动底部边框。

$("#example").slideToggle();

这也会在隐藏时使底部边框平滑过渡。

function load() {
        $("#example").hide();
    $("label").click(function() {
            $("#example").slideToggle();
    })
}

div {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid black;
    font-size: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload=load()>
  <div>
      <label>Shown</label>
      <label id=example>Addition</label>
  </div>
</body>

jQuery 添加子项时转换容器的大小

Transition The Size of a Container When jQuery Adds Children

javascript

jquery

transition