Question

我已经使用了这一堆代码，它完美无缺，但在显示/隐藏更多内容时无法添加转换。有人可以告诉我，我该怎么做？我想使用纯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

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

Answer 2

您只能在display: none或block或visibility上使用可转换的可计算属性进行转换。你可以使用opacity。

＆＃13;

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

＆＃13;

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

＆＃13;

<强> JSFiddle

使用css3对show / hide元素进行css过渡效果

2 个答案: