从 height: 0 过渡到 height:auto，然后使用 JavaScript 和 VueJS 再次返回答案

【问题标题】：Transitioning from height: 0 to height:auto, and back again using JavaScript and VueJS从 height: 0 过渡到 height:auto，然后使用 JavaScript 和 VueJS 再次返回
【发布时间】：2018-09-30 14:18:33
【问题描述】：

我正在从 height 0px 过渡到 height auto（因为我不确定容器最终需要多大的高度，max-height 可以作为替代方案，但我更喜欢这样做而是。

从 0 转换到 auto 似乎工作得很好，但是从 auto 转换回 0 不会在所需的动画持续时间执行，因为高度 0 到 auto（折叠以展开）。

https://codesandbox.io/s/q3471wj81w

【问题讨论】：

对我来说工作正常。我检查了 Chrome 调试器的 computed 部分，当 div 折叠时，您的 height 属性设置为 0。我没有看到你的问题。
更正它正在崩溃，但是转换：height 250ms ease 至少在我的浏览器（chrome）上似乎没有为崩溃而触发（它为展开而触发）。展开和折叠之间的过渡是即时的，从折叠到展开的过渡发生在 250 毫秒以上。
那么首先你需要改变这个：“但是从 auto 转换回 0 根本不执行转换。”因为它正在工作。只是没有按照您希望的速度运行。
你希望文章正文默认是怎样的？显示还是不显示？
对我来说仍然可以正常工作。人字形的开口是渐进的，而崩溃是瞬间的。以下是我在您的代码中写入并允许在代码运行时打印的一些打印语句： false height 0px height2 0px true height 216px height2 216px inside timeout false height 0px height2 0px true height 216px height2 216px inside timeout

标签： javascript css vue.js css-transitions

【解决方案1】：

为max-height 设置动画，将高度设置为auto 和max-height 设置为比您拥有的更大的值，并将过渡设置为max-height，并在折叠时将其设置为0，overflow:hidden折叠时将隐藏文本。

我无法让它在您的 VueJs 上工作，但这是一个如何工作的示例，请根据您的需要进行调整：

let article = document.querySelector('p');
document.querySelector('#btn').addEventListener('click', function() {
  article.classList.toggle('collapsed');
});

p {
  height: auto;
  max-height: 200px;
  transition: max-height .3s linear;
  overflow: hidden;
  background: #aaa;
}

.collapsed {
  max-height: 0;
}

<button id="btn">
collapse
</button>
<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at magna ac tellus volutpat cursus sed vitae nisi. Ut pellentesque mauris et orci sagittis placerat. Vivamus a dui sem. Morbi dignissim dictum elit sodales feugiat. Fusce in dolor
    non erat pretium malesuada ac at odio. Nulla consectetur, est et conseqc fringilla ligula egenisi ornare odio, vitae sodales ante ex non mauris. Vivamus iaculis faucibus nibh, nec posuere sapien posuere eget. Nulla ac est est. Nulla interdum vel eros
    vitae lobortis.</p>
</article>

【讨论】：

这个问题是，当内容数量不同时，转换将花费更短的时间，而且，如果您正在为客户制作组件，则此解决方案将无法正常工作，因为您永远不知道有多少内容适合。

【解决方案2】：

解决它的一种方法是像这样更新Article 组件中的startTransition 方法：

startTransition(evt) {
  const _height = this.$refs.articleBody.scrollHeight;
  this.height =  this.show ? `${_height}px` : 0;
  const timeout = setTimeout(() => {
    this.$nextTick(() => {
      this.height =  !this.show ? `${_height}px` : 0;
      this.show = !this.show;
      clearTimeout(timeout);
    });
  }, 50);
}

它可以进行一点重构，但它可以完成工作。它让您有时间在初始状态下设置高度，然后触发高度变化。

【讨论】：

【解决方案3】：

我实际上已经找到了解决这个问题的方法。与 auto 之间的转换是问题所在，所以我做了一些重构。

我使用 scrollHeight 作为基础将高度从 auto 设置回 px，然后使用超时将高度设置为 0，这使过渡有足够的时间开始。

https://codesandbox.io/s/oxj8rm3oyy

【讨论】：

是的，我采用的方法相同。完全有效。几乎相同，但更简洁一些。

【解决方案4】：

很抱歉劫持了这个旧线程。但是，如果其他人像我一样对此挠头，我会很高兴找到更新的答案。在 vue 中使用指令非常容易。然后，您还可以为高度变化设置动画。所有这些都没有在 dom 之外使用任何奇怪的元素移动或猜测最大高度。

【讨论】：