有没有一种方法可以在转换完成后立即更改某个属性,同时立即更改另一个属性?
我想将元素的高度
从0
过渡到100%
。当height
为0
时,我希望它的overflow
hidden
,当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
。如何做到这一点?
最佳答案
仅通过 CSS 转换是不可能的。如果你不想使用其他任何东西,你可以设置 overflow:scroll
来代替,这样滚动条就会从一开始就出现。
有 transitionend
允许您使用 JS 对过渡结束使用react的事件。因此,使用一个小的处理程序函数,您可以仅在那时添加 overflow:auto
(或设置一个类来实现该效果)。
使用 animation而不是过渡可能是另一种方式。您需要在每个关键帧中指定 overflow
,因为 overflow
是一个无法插值的属性,否则将完全从动画中删除。
关于html - 转换后更改属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28687395/