javascript - 不用 Javascript 创建平滑的隐藏/显示动画

Question

我是网络编程的新手(即不到一个月)。

我想做的是为 FAQ 列表创建一个漂亮的平滑隐藏/显示效果，如本网站所示:

http://www.hl.co.uk/pensions/sipp/frequently-asked-questions

我知道这个网站使用 javascript 来创建效果，但我想知道是否可以只使用 CSS 来实现。

HTML5 < details > < summary > 标签在结构方面似乎工作得很好(尽管只在 chrome 和 safari 中工作):

<details>
<summary>About Us</summary>
<p>Some information about us</p>
</details> 

唯一的问题是过渡非常粗糙，但我似乎无法使用 CSS 过渡，因为我想要点击时的动画，而不是悬停等(加上属性不会改变，所以什么都没有之间的过渡)。

有没有办法做到这一点，还是只需要掌握 Javascript？显然这是下一步，我只是希望有一种方法可以在 CSS 中执行此操作，以便我可以尽快完成此操作。

提前致谢。

Answer 1

如果您有创意，实际上可以使用纯 CSS 来完成。

(PS - 我只放置了一个 <form> 包装器以允许重置 radio 按钮而不影响多项选择 checkbox 按钮)

Here is a nice example for you

CSS

span, p {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
input[type="reset"] {
    display: block;
    border: 1px solid pink;
    background: maroon;
    color: white;
    padding: 5px;
    margin: 5px;
    font-family: sans;
}
p {
    float: left;
    clear: left;
    overflow: hidden;
    display: table-row;
}
label {
    width: 100%;
    font-size: 200%;
    font-weight: bold;
}
input[type="checkbox"], input[type="radio"] {
    border: none;
    background: transparent;
    display: none;
}
input[type="checkbox"] ~ span, input[type="radio"] ~ span {
    display: block;
    float: left;
    clear: left;
}
input[type="checkbox"]:not(:checked) ~ span, input[type="radio"]:not(:checked) ~ span {
    opacity: 0;
    height: 0;
}
input[type="checkbox"]:checked ~ span, input[type="radio"]:checked ~ span {
    opacity: 1;
    height: auto;
}

HTML

<h1>Singles</h1>
<form id="singles" onsubmit="return false;">
    <p class="option">
        <input type="radio" id="one" name="hard" />
        <label for="one">OneOneOneOne</label> 
        <span><input type="reset" form="singles" value="Hide" />
            If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
    </p>
    <p class="option">
        <input type="radio" id="two" name="hard" />
        <label for="two">TwoTwoTwoTwo</label> 
        <span><input type="reset" form="singles" value="Hide" />
            Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
    </p>    
    <p class="option">
        <input type="radio" id="three" name="hard" />
        <label for="three">ThreeThreeThreeThree</label> 
        <span><input type="reset" form="singles" value="Hide" />If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
    </p>
    <p class="option">
        <input type="radio" id="four" name="hard" />
        <label for="four">FourFourFourFour</label> 
        <span><input type="reset" form="singles" value="Hide" />
            Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
    </p>
</form>
<h1>Multiples</h1>
<form id="multiples" onsubmit="return false;">
    <p class="option">
        <input type="checkbox" id="one2" name="easy" />
        <label for="one2">OneOneOneOne</label> 
        <span>If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
    </p>
    <p class="option">
        <input type="checkbox" id="two2" name="easy" />
        <label for="two2">TwoTwoTwoTwo</label> 
        <span>Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
    </p>    
    <p class="option">
        <input type="checkbox" id="three2" name="easy" />
        <label for="three2">ThreeThreeThreeThree</label> 
        <span>If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
    </p>
    <p class="option">
        <input type="checkbox" id="four2" name="easy" />
        <label for="four2">FourFourFourFour</label> 
        <span>Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
    </p>
</form>