css轉換效果使用css3顯示/隱藏元素

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。

.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