使用css3显示/隐藏元素的css过渡效果[重复]

Posted 2023-03-05

【中文标题】使用css3显示/隐藏元素的css过渡效果[重复]

【英文标题】：css transition effects on show/hide element using css3 [duplicate]

【发布时间】：2016-06-06 17:16:34

【问题描述】：

我使用了这组代码，效果很好，但是在显示/隐藏更多内容时我无法添加过渡。有人可以告诉我我该怎么做吗？我想使用纯 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>

现场演示：http://jsbin.com/xufepopume/edit?html,css,js,output

【参考方案1】：

对于过渡，您需要 2 个值（开始/结束）可以按步数、数字划分。

none 和 block 不能也只能从一个切换到另一个，你最终可能会延迟它。

折衷方案可能是使用 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>

【讨论】：

不错的解决方案，就像一个魅力！我还必须设置 float: left;并编辑 max-height 属性，现在它可以工作并且看起来也很完美。非常感谢你

对于标题 2，如何在保持 overflow:auto 的同时防止滚动条闪烁进出？

【参考方案2】：

您只能在可计算属性上使用转换，在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>
  

JSFiddle

【讨论】：

感谢您的建议。很好，但是当内容被隐藏时会有空白，那不好，我使用了上面的解决方案，无论如何谢谢你的时间:)