Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animate Details Element
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- main -->
<details>
<summary>Click me!</summary>
<section>Now you see me!</section>
</details>
<!-- /main -->
<script src="script.js"></script>
</body
</html>
//jQuery needed
$('details').on("click",function(e){
e.preventDefault();//阻止 details 直接显示内容
if(!$(this).attr('open')){
$(this).attr('open','');
}else{
$(this).addClass('closing');
setTimeout(() => {
$(this).removeClass('closing');
$(this).removeAttr('open');
}, 300);
}
});
details summary {
list-style-type: none
}
details summary::-webkit-details-marker {
display: none
}
details summary::before {
content: '+';
transition: transform .3s;
margin-right: .5em;
display: inline-block /* 必须是块级元素才能够旋转 */
}
details[open]:not(.closing) summary::before {
transform: rotate(45deg)
}
details[open] summary ~ * {
animation: sweepIn .3s ease-in-out;
}
@keyframes sweepIn {
0% {opacity: 0; transform: translateY(-10px); margin-bottom: -10px}
100% {opacity: 1; transform: translateY(0)}
}
details.closing section {
animation: sweepOut .3s ease-in-out;
}
@keyframes sweepOut {
0% {opacity: 1; transform: translateY(0);}
100% {opacity: 0; transform: translateY(-10px); margin-bottom: -1.5em}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment