css - 是什么导致折叠或展开 CSS 过渡期间的跳跃？

Question

我知道有 CSS/JS 动画库可以完成此操作，但我正在学习 CSS Transitions 并希望使用最少的 JS 来完成此操作。 (我很喜欢 CSS :)

我有几个大小相同的 flex-item 列，flex-grow: 1。我想点击列标题来缩小或展开列，标题本身应该保持可见(以便单击它可以展开)。由于 display 不是可动画的 CSS 属性，我尝试在 width: 0; 上进行 2 秒的转换。 opacity: 0; 在 flex-item 内容上(头部除外)和 flex-grow: 0 在 flex-item 本身上。

我正在尝试消除崩溃结束时和展开开始时不希望出现的“跳跃”。

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

我试图了解在没有魔术数字黑客的情况下消除跳跃的确切交互。

这是一个 CodePen: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>

如果它有助于传达目标，我的用例是周 View 中的日历，其中日期(星期一等)是列。

Answer 1

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

您可以尝试为 max-width 设置动画。唯一的缺点是使用大值时开始时会有延迟，但您可以调整过渡以纠正此问题:

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;
  max-width: 100vw;
  transition: opacity 2s, max-width 2s;
}

.collapsed div {
  outline: 1px solid purple;

  opacity: 0;

  max-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>