英文:
CSS animation of block height when going to 'height:auto'
问题
动画运行正常，只有在我指定了一个确切的高度值时，块才会平滑地改变高度。
.main {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(var(--main-color-rgb), .9);
transition: var(--header-transition);
display: flex;
}
.main.notActive {
height: 80px;
}
当我希望非活动状态的高度取决于内容时，动画的平滑性消失了。
.main.notActive {
height: auto;
}
我该如何解决这个问题？
附注 - 更改 'display' 的值以及与其相关的所有内容时，也会出现类似的问题。例如，我无法在过渡时将 'flex-direction' 从 'column' 更改为 'row'。我失去了流畅性。我认为这些是相似的问题，所以我把它添加在这里。
英文:
The animation works fine, the block smoothly changes height only if I specify an exact height value.
.main {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(var(--main-color-rgb), .9);
transition: var(--header-transition);
display: flex;
}
.main.notActive {
height: 80px;
}
when I want the height of the inactive state to depend on the content, the smoothness of the animation disappears.
.main.notActive {
height: auto;
}
How can I fix this?
PS - a similar problem occurs with changing the value of 'display' and everything connected with it. For example, I can't change 'flex-direction' from 'column' to 'row' when transitioning. I'm losing fluidity. I think that these are close problems, so I added it here.
答案1
得分: 0
你可以使用“min-height”并设置一个较大的值来模拟这个效果。
英文:
you can use "min-height" with a great value for emulate this effect.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论