純CSS手風琴 - 揭示內容問題

我已經創建了一個簡單的手風琴，只使用html和css，但有一個問題希望你能幫助我。手風琴正常工作，但使用display：none來隱藏內容，然後顯示：block來顯示它。我希望平滑過渡向下滑動0.5秒以便內容在鏈接被按下時顯示，並且當用戶按另一個鏈接時，我想滑動活動內容並滑動活動內容。純CSS手風琴 - 揭示內容問題

感謝

HTML代碼：

<section id="accordion"> 
    <section id="accordion-title-1"> 
     <a href="#accordion-title-1"> 
      <h2>Videos</h2> 
     </a> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis repellat obcaecati fugiat voluptatibus doloremque provident nihil, facilis harum quos excepturi officia assumenda odit, dolorem voluptates quidem molestiae velit, nostrum eligendi.</p> 
    </section> 
    <section id="accordion-title-2"> 
     <a href="#accordion-title-2"> 
      <h2>Videos</h2> 
     </a> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis repellat obcaecati fugiat voluptatibus doloremque provident nihil, facilis harum quos excepturi officia assumenda odit, dolorem voluptates quidem molestiae velit, nostrum eligendi.</p> 
    </section> 
    <section id="accordion-title-3"> 
     <a href="#accordion-title-3"> 
      <h2>Videos</h2> 
     </a> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis repellat obcaecati fugiat voluptatibus doloremque provident nihil, facilis harum quos excepturi officia assumenda odit, dolorem voluptates quidem molestiae velit, nostrum eligendi.</p> 
    </section> 
</section>

CSS代碼：

* { 
    padding:0px; 
    margin:0px; 
    box-sizing: border-box; 
} 

body { 
    font-family: sans-serif; 
    font-size: 14px; 
} 

#accordion { 
    margin-top:100px; 
    padding:20px; 
    background:#2e6572; 
} 

#c-accordion section { 
line-height: 1.6em; 
} 


#accordion section a { 
    color:#fff; 
    text-decoration: none; 
    font-size: 20px; 
    letter-spacing: 2px; 
    display: inline-block; 
    padding-bottom:15px; 
    border-bottom: 1px solid red; 
} 

#accordion #accordion-title-2 a, #accordion #accordion-title-3 a { 
    margin-top:20px; 
} 

#accordion section p { 
    color:#bebebe; 
    margin-top:20px; 
    display: none; 
} 

#accordion section:target p { 
    display: block; 
}

來源

2016-09-08 NoName84

您不能在'display'屬性上顯示動畫。但是你可以玩'height'和'min-height'屬性。我有一些想法，將在一段時間後發佈 –

我建議使用最大高度的過渡。 –

我已經嘗試過高度，但是我沒找到解決方案，也許你可以幫忙 – NoName84

剛剛發佈的更改CSS

#accordion section p { 
    color:#bebebe; 
    margin-top:20px; 
    max-height:0; 
    overflow: hidden; 
    transition: max-height 0.5s ease-in; 
} 

#accordion section:target p { 
    max-height:100px; 
    overflow:none; 
    transition: max-height 0.5s ease-in; 
}

演示：http://jsbin.com/rivayagehe/edit?html,css,output

這有點粗糙，可能需要一些拋光

來源

2016-09-08 08:24:14

是的工作，謝謝！ – NoName84

純CSS手風琴 - 揭示內容問題

回答

相關問題