Html 使用 css3 显示/隐藏元素的 css 过渡效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35601762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css transition effects on show/hide element using css3
提问by Michal Vlkovic
I have used this bunch of code, which works perfect, but I am unable to add transition when showing/hiding more content. Can somebody please tell me how can I do that? I would like to use pure CSS, no JS. Thanks all in forward!
我已经使用了这堆代码，效果很好，但是在显示/隐藏更多内容时我无法添加过渡。有人可以告诉我我该怎么做？我想使用纯 CSS，没有 JS。感谢大家的转发！
.showMore{
font-size: 14px;
display:block;
text-decoration: underline;
cursor: pointer;
}
.showMore + input{
display:none;
}
.showMore + input + *{
display:none;
}
.showMore + input:checked + *{
display:block;
}<label class="showMore" for="_1">Heading 1</label>
<input id="_1" type="checkbox">
<div>Hidden 1</div>
<label class="showMore" for="_2">Heading 2</label>
<input id="_2" type="checkbox">
<div>Hidden2</div>Live demo: http://jsbin.com/xufepopume/edit?html,css,js,output
回答by G-Cyrillus
for a transition you need 2 values (start/end) that can be dividedby steps, numbers.
对于转换，您需要 2 个值（开始/结束），可以按步骤、数字划分。
noneand blockcan't and can only switch from one to another, you could eventually delay it.
none并且block不能也只能从一个切换到另一个，你最终可能会延迟它。
A compromisecould be to use max-heightand set an overflowin case value is to short.
一个折衷方案可能是使用max-height和设置一个overflow以防值太短。
.showMore {
font-size: 14px;
display: block;
text-decoration: underline;
cursor: pointer;
}
.showMore + input {
display:none;
}
.showMore + input + * {
max-height: 0;
/*and eventually delay an overflow:auto; */
overflow:hidden;
transition: max-height 0.5s, overflow 0s;
}
.showMore + input:checked + * {
/* here comes the compromise, set a max-height that would for your usual contents*/
max-height: 5em;
overflow:auto;
transition: max-height 0.5s, overflow 0.5s 0.5s;
}<label class="showMore" for="_1">Heading 1</label>
<input id="_1" type="checkbox">
<div>Hidden 1 Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1</div>
<label class="showMore" for="_2">Heading 2</label>
<input id="_2" type="checkbox">
<div>Hidden2</div>回答by Pedram
You can only use transition on calculable properties, on display: noneor blockor visibilityyou can't use transition. you can use opacity.
您只能使用过渡的可计算性，对display: none或block或visibility不能使用的过渡。你可以使用opacity.
.showMore{
font-size: 14px;
opacity: 1;
text-decoration: underline;
cursor: pointer;
transition: .3s all ease;
}
.showMore + input{
opacity: 0;
transition: .3s all ease;
}
.showMore + input + *{
opacity: 0;
transition: .3s all ease;
}
.showMore + input:checked + *{
opacity: 1;
transition: .3s all ease;
}
<label class="showMore" for="_1">Heading 1</label>
<input id="_1" type="checkbox">
<div>Hidden 1</div>
<label class="showMore" for="_2">Heading 2</label>
<input id="_2" type="checkbox">
<div>Hidden2</div>
