Question

我从高度0px过渡到高度自动（因为我不确定容器最终需要多大的高度，最大高度可以替代，但是我可以我更喜欢这样做。

从0转换到自动似乎工作得很好，但是从自动转换回0并不会在所需的动画持续时间内执行，如高度0到自动（折叠扩展）。

Answer 1

animate the max-height instead, set the height to auto and max-height to a bigger value than you will have and set the transition on max-height and set it to 0 when collapsing, overflow:hidden will hide the text when collapsing.

i couldn't get it to work on your VueJs but here's an example of how that works, tweak it to your needs :

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>

Answer 2

我实际上找到了解决这个问题的方法。转向和从auto过渡是个问题，所以我做了一些重构。

我使用scrollHeight作为基础将高度从auto设置为px，然后使用超时将高度设置为0，从而为转换提供足够的时间来启动。

https://codesandbox.io/s/oxj8rm3oyy

Answer 3

解决问题的方法是更新startTransition组件中的Article方法，如下所示：

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);
}

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

Answer 4

很抱歉劫持了这个旧线程。但是，如果其他人像我一样ing着这个脑袋，我会很努力地找到更新的答案。在vue中使用指令非常容易。然后，您也可以设置高度变化的动画。所有这些都无需在dom之外使用任何怪异的元素移动或猜测最大高度。

从高处过渡：0到高度：自动，然后使用JavaScript和VueJS再次返回

4 个答案: