Artem Z Artem Z - 4 months ago 23
CSS Question

How to animate <details> hiding?

I've used @keyframes to animate the details tag opening. Now I want to animate closing, but yet I can't find the CSS solution for this.
@keyframes for closing not working. See the code snippet.
Only CSS solution required.



.wrapper {
width: 300px;
height: 300px;
background-color: #ecf0f1;
}
details {
outline: none;
background-color: #95a5a6;
cursor: pointer;
}
summary {
outline: none;
}
details[open] > ul {
animation-name: fadeIn;
animation-duration: 1s;
}
details:not([open]) > ul {
animation-name: fadeOut;
animation-duration: 1.6s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
100% {
opacity: 1;
}
0% {
opacity: 0;
}
}

<div class="wrapper">
<details>
<summary>Sample</summary>
<ul>
<li>
<input type="radio" checked/>
<label>Label 1</label>
</li>
<li>
<input type="radio" />
<label>Label 2</label>
</li>
<li>
<input type="radio" />
<label>Label 3</label>
</li>
</ul>
</details>
</div>




Answer

Due to <details> having some limitations, ive created a fiddle in which I animate a div and its content to match what your asking for.

With a Jquery Class Toggle:

$(document).ready(function(){ $("#details").click(function(){ $("#details").toggleClass("Close"); }); });

and using transitions:

transition: all 0.3s linear; -webkit-transition: all 0.3s linear;

with a change to the detail tag and adding some css.

https://jsfiddle.net/14cpx9kw/2/

Also check out this answer by @morewry