我正在尝试使用 CSS 过渡使
height: 0; 开始。悬停时，高度设置为 height:auto;。然而，这导致它只是出现，而不过渡，如果我从 height: 40px; 到 height: auto;，那么它会向上滑动到 height: 0;，然后突然跳到正确的高度。
如果不使用 JavaScript，我还能如何做到这一点？
#child0 { height: 0; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease; -webkit-transition: height 1s ease; -o-transition: height 1s ease; transition: height 1s ease; } #parent0:hover #child0 { height: auto; } #child40 { height: 40px; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease; -webkit-transition: height 1s ease; -o-transition: height 1s ease; transition: height 1s ease; } #parent40:hover #child40 { height: auto; } h1 { font-weight: bold; } The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
Hover me (height: 0)
Some content
Some content
Some content
Some content
Some content
Some content
Hover me (height: 40)
Some content
Some content
Some content
Some content
Some content
Some content
您应该使用scaleY。
ul { background-color: #eee; transform: scaleY(0); transform-origin: top; transition: transform 0.26s ease; } p:hover ~ ul { transform: scaleY(1); }我在jsfiddle上制作了上述代码的供应商前缀版本，并进行了更改你的jsfiddle使用scaleY而不是高度。
编辑有些人不喜欢
scaleY转换内容的方式。如果这是一个问题，那么我建议使用clip代替。ul { clip: rect(auto, auto, 0, auto); position: absolute; margin: -1rem 0; padding: .5rem; color: white; background-color: rgba(0, 0, 0, 0.8); transition-property: clip; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } h3:hover ~ ul, h3:active ~ ul, ul:hover { clip: rect(auto, auto, 10rem, auto); }Some text...
在过渡中使用
max-height，而不是height。并将max-height的值设置为比您的盒子更大的值。请参阅 Chris Jordan 在另一个JSFiddle 演示/stackoverflow.com/a/20226830/18706">在这里回答。
#menu #list { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: #d5d5d5; } #menu:hover #list { max-height: 500px; transition: max-height 0.25s ease-in; }