html - 转换后更改属性

Question

有没有一种方法可以在转换完成后立即更改某个属性，同时立即更改另一个属性？

我想将元素的高度从0过渡到100%。当height为0时，我希望它的overflowhidden，当height 达到 100%，我希望它的 overflow 变成 auto。

我试过这个:

#foo{
  height: 0;
  overflow: hidden;
  transition: height 0.25s;
}

#foo.some-state{
  height: 100%;
  overflow: auto;
}

这会导致奇怪的效果。如果最终状态以足够的高度结束，因此不需要滚动条，则会发生滚动条首先在 height: 0 处不存在的情况。然后在transition开始的时候出现，在transition的时候height不够的时候一直维持。当高度足够时，滚动条再次消失。

在这种情况下，我希望滚动条在转换过程中不出现。换句话说，我希望 overflow 在转换完成时从 hidden 切换到 auto。如何做到这一点？

Answer 1

仅通过 CSS 转换是不可能的。如果你不想使用其他任何东西，你可以设置 overflow:scroll 来代替，这样滚动条就会从一开始就出现。

有 transitionend允许您使用 JS 对过渡结束使用react的事件。因此，使用一个小的处理程序函数，您可以仅在那时添加 overflow:auto(或设置一个类来实现该效果)。

使用 animation而不是过渡可能是另一种方式。您需要在每个关键帧中指定 overflow，因为 overflow 是一个无法插值的属性，否则将完全从动画中删除。