CSS 转换自动高度不工作

我有一个网站，我决定用纯 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>

129710 次浏览
小开

CSS transition doesn't work with auto value. Get the scroll height with JavaScript el.scrollHeight or use max-height instead.

小开

auto isn't an appropriate type for an animatable property, see CSS Transitions: 7. Animatable properties. You need either a length (px,em,...) or percentage (13.37%).

Thus a CSS only solution isn't possible, as long as auto isn't added to the list. You'll need to use JavaScript or a specific length value.

小开
最佳答案

One solution if you just want to use CSS is to transition max-height instead of height and set it to something greater than it will ever get ...

Here's a DEMO

You will need to tweek the speed of the transition a bit, but at least the example gives you an idea on how it can be done. Don't forget to change the property in your transition as well. From transition: height 0.5s; to transition: max-height 0.5s;.

Hope this helps! 

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

小开

You can't animate to or from a dimension of "auto" (unfortunately). My usual approach for this is to animate the height of an outer DIV which has a single child which is a style-less DIV used only for measuring the content height.

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>

小开

You should use 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>

Or you can use clip to cut the list.

ul {
clip: rect(auto, auto, 0, auto);
position: absolute;
margin: 0;
padding: .5rem;


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 list</li>
<li>is clipped.</li>
<li>A clip transition</li>
<li>will show it</li>
</ul>
<p>
Some text...
</p>


提交答案