纯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手风琴 - 揭示内容问题

回答

相关问题