是什么原因导致此CSS折叠或扩展过渡期间发生跳转？

Question

我意识到有CSS / JS动画库可以完成此操作，但是我正在学习CSS Transitions，并希望使用最少的JS来完成此操作。 （我非常喜欢CSS：）

我有几个flex-item列，大小均与flex-grow: 1相等。我想单击列标题以缩小或展开列，标题本身应保持可见（以便可以单击以展开）。由于display不是可设置动画的CSS属性，因此我尝试在flex-item内容（标题除外）的width: 0; opacity: 0;和flex-item本身的flex-grow: 0上进行2秒的过渡。

我正在尝试消除折叠结束时和展开开始时的不良“跳跃”。

尽管持续时间相同并且可能在同一时间触发（在单击类发生更改之后），但是弹性增长过渡似乎与内容的宽度/不透明过渡不同步，因此弹性增长过渡完成“太早”（在内容为宽度0之前），然后在宽度转换完成后跳到最后一位。如果我使flex-grow过渡更长（比宽度过渡）并延迟它，则跳跃会减少。

我试图了解确切的交互作用，以消除没有魔术数字黑客的情况。

这里是一个代码笔：https://codepen.io/richardkmichael/pen/abzYOjB

document.querySelectorAll(".collapsible").forEach(function(c) {
  c.addEventListener("click", function(e) {
    this.classList.toggle("collapsed");
  });

  c.addEventListener("transitionrun", function(e) {
    this.classList.add("transitioning");
  });

  c.addEventListener("transitionend", function(e) {
    this.classList.remove("transitioning");

    // Set `display: none;` on contained div?
    // Perhaps unnecessary, since `width: 0`?
  });
});
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

p {
  margin: 1rem;
}

.container {
  outline: 1px solid blue;
  padding: 1rem;
  margin-bottom: 3rem;

  display: flex;
}

.collapsible {
  outline: 1px solid red;
  text-align: center;
  
  /* Lengthen transition and/or increase delay to remove jump. */
  /* Permits width/opacity transition to complete? */
  flex-grow: 1;
  transition: flex-grow 2.5s 0.5s;
}

.collapsible.collapsed {
  flex-grow: 0;
}

.collapsible div {
  outline: 1px solid green;

  opacity: 1;
  width: 100%;
  transition: opacity 2s, width 2s;
}

.collapsed div {
  outline: 1px solid purple;

  opacity: 0;

  width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.transitioning div {
  /* Debugging. */
  background: cyan;

  /* Needed during transition to full-size. */
  overflow: hidden;
  white-space: nowrap;
}
<div class="container">
  
  <div class="collapsible">
    <h3>One</h3>
    <div>This is item 1.</div>
  </div>
  
  <div class="collapsible">
    <h3>Two</h3>
    <div>This is item 2.</div>
  </div>
  
</div>

<p>
  The aim is to smoothly eliminate the column content, leaving only the header.
</p>

<p>
  Click a column header ("One" or "Two") to collapse the column; click again to expand.</p>

<p>
  What is causing the jump near the end of the collapse or expand transition?
</p>

如果有助于传达目标，则我的用例是每周视图中的日历，其中以天（星期一等）为列。

我意识到有CSS / JS动画库可以完成此操作，但是我正在学习CSS Transitions，并希望使用最少的JS来完成此操作。 （我非常喜欢CSS ：）我有几个...

Answer 1

我想这个问题是由于width:100%造成的，更确切地说是由于使用百分比值创建了一个复杂的计算来解决它。

Answer 2

简短答案：