Skip to content

Instantly share code, notes, and snippets.

@BigCoke233

BigCoke233/details-animation.html

Last active August 17, 2022 18:17
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BigCoke233/3c83fdd44f5349e2a169e99412b8e78a to your computer and use it in GitHub Desktop.
Save BigCoke233/3c83fdd44f5349e2a169e99412b8e78a to your computer and use it in GitHub Desktop.
Download ZIP
Animate Details Element
Raw
details-animation.html
<!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>
Raw
script.js
//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);
}
});
Raw
style.css
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