CSS过渡自动高度不工作[复制](CSS transition auto height not wo

这个问题已经在这里有一个答案：

• 我怎样才能过渡高度：0; 为height：auto; 使用CSS？ 45个回答

我有一个网站，我决定用纯CSS代码段代替基于jQuery的转换框。 当我使用固定的高度值的转换（CSS的最后几行），它工作得很好，但随着auto价值，动画丢失，只有高度的变化有效果！

是否有与自动值使用的方法吗？ 我想用变量文本和无脚本。

 .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> 

Answer 1:

如果你只是想使用CSS一种解决方案是过渡max-height ，而不是height ，并将其设置的东西大于它永远不会得到...

这里有一个DEMO

您需要tweek的过渡位的速度，但至少例子让你在它是如何做的想法。 不要忘了更改的属性中的转换也是如此。 从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> 

Answer 2:

你不能动画或从“自动”（不幸）的尺寸。 我对这种通常的做法是动画其中有一个孩子是一个样式少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> 

Answer 3:

您应该使用的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> 

或者你可以使用clip 削减名单。

 ul { clip: rect(auto, auto, 0, auto); position: absolute; left: 0; margin: 0; padding: 0; color: white; background-color: rgba(0, 0, 0, 0.8); transition-delay: 0.29s; 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 { clip: rect(auto, auto, 10rem, auto); } 

 <h3>Hover here</h3> <ul> <li>This</li> <li>list</li> <li>is</li> <li>clipped.</li> <li>A clip</li> <li>transition</li> <li>will</li> <li>show it</li> </ul> <p> Some text... </p> 

Answer 4:

次前，我有这个问题，努力了这么多需要克服，但CSS转换不支持自动值工作。 最后，我想出了一个混合溶液，让CSS过渡可以，但是改变的JavaScript的高度。 这将很好地工作。

Answer 5:

auto不是一个动画属性合适的类型，请参阅CSS过渡：7.设置动画的属性 。 您需要一条长度（ px ， em ，...）或百分比（ 13.37%

因此，一个CSS唯一的解决办法是不可能的，只要auto不添加到列表中。 你需要使用JavaScript或特定长度值。

文章来源: CSS transition auto height not working [duplicate]