CSS过渡自动高度不工作
我有一个网站，我决定用纯粹的CSS代码replace基于jQuery的切换框。 当我为转换使用固定的高度值（CSS的最后一行）时，效果很好，但是使用auto值时，animation不见了，只有高度变化才有效果！
有没有办法使用这个自动值？ 我想使用可变的文本和没有脚本。
.ac-container{ width: 400px; margin: 10px auto 30px auto; text-align: left; } .ac-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); } .ac-container label:hover{ background: #fff; } .ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #c6e1ec; color: #3d7489; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } .ac-container input{ display: none; } .ac-container section{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; height: 0px; position: relative; z-index: 10; -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container section p{ font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } .ac-container input:checked ~ section{ -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; transition: height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); } .ac-container input:checked ~ section.ac-small{ height: 120px; /*auto*/ }
<div class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <section class="ac-small"> <p>Some content... </p> </section> <label for="ac-1">About us</label> </div> <div> <input id="ac-2" name="accordion-2" type="checkbox" /> <section class="ac-small"> <p>Some content... </p> </section> <label for="ac-2">About us</label> </div> </div>
一个解决scheme，如果你只是想使用CSS是转换max-height而不是height ，并将其设置为比事情会得到更大的东西…
这是一个DEMO
你需要稍微调整过渡的速度，但是至less这个例子给了你一个关于如何完成的想法。 不要忘记改变你的过渡财产。 从transition: height 0.5s; transition: max-height 0.5s; 。
希望这可以帮助！
.ac-container{ width: 400px; margin: 10px auto 30px auto; text-align: left; } .ac-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); } .ac-container label:hover{ background: #fff; } .ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #c6e1ec; color: #3d7489; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } .ac-container input{ display: none; } .ac-container section{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; max-height: 0px; position: relative; z-index: 10; -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container section p{ font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } .ac-container input:checked ~ section{ -webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); } .ac-container input:checked ~ section.ac-small{ max-height: 500px; /*auto*/ }
<div class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <section class="ac-small"> <p>Some content...Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... </p> </section> <label for="ac-1">About us</label> </div> <div> <input id="ac-2" name="accordion-2" type="checkbox" /> <section class="ac-small"> <p>Some content... </p> </section> <label for="ac-2">About us</label> </div> </div>
不能animation到“自动”的维度（不幸的是）。 我通常的做法是animation化一个外部DIV的高度，这个外部DIV有一个单独的孩子，这个DIV只用于测量内容的高度。
function growDiv() { var growDiv = document.getElementById('grow'); if (growDiv.clientHeight) { growDiv.style.height = 0; } else { var wrapper = document.querySelector('.measuringWrapper'); growDiv.style.height = wrapper.clientHeight + "px"; } }
#grow { -moz-transition: height .5s; -ms-transition: height .5s; -o-transition: height .5s; -webkit-transition: height .5s; transition: height .5s; height: 0; overflow: hidden; outline: 1px solid red; }
<input type="button" onclick="growDiv()" value="grow"> <div id='grow'> <div class='measuringWrapper'> <div> The contents of my div. </div> <div> The contents of my div. </div> <div> The contents of my div. </div> <div> The contents of my div. </div> <div> The contents of my div. </div> <div> The contents of my div. </div> </div> </div>
你应该使用scaleY。
ul { background-color: #eee; transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease-in-out; } p:hover ~ ul { transform: scaleY(1); }
<p>Here (scaleY(1))</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
时代之前，我有这个问题，并努力克服，但CSS过渡不符合自动值。 最后我想出了一个混合的解决scheme，让css过渡，但用JavaScript改变高度。 它会完美的工作。
auto不适合animation属性，请参阅CSS转换：7.animation属性 。 您需要长度（ px ， em ，…）或百分比（ 13.37% ）。
因此，只有在auto添加到列表中时，才能使用CSS解决scheme。 您需要使用JavaScript或特定的长度值。
