alyenc/hugo-theme-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Closed #108, add animated transition when expand and collapse code block.

Browse Source
This commit is contained in:
elkan1788 2025-01-23 17:12:34 +08:00
parent 4ec1f8e732
commit 0b8bdc0e00
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/css/_common/scaffolding/highlight/copy-code.scss
View File

@ -38,6 +38,7 @@
line-height: 1; line-height: 1;
text-rendering: auto; text-rendering: auto;
padding-right: .25rem; padding-right: .25rem;
transition: content 1s ease-in-out;
&::before { &::before {
content: "\f102"; content: "\f102";
@ -61,9 +62,18 @@
> .chroma { > .chroma {
position: relative; position: relative;
max-height: 500px;
opacity: 1;
visibility: visible;
transition: max-height 0.8s ease-in-out, opacity 0.7s ease-in-out;
&.hidden-code { &.hidden-code {
display: none; max-height: 0;
opacity: 0;
visibility: hidden;
animation-name: slideInUp;
animation-duration: 1s;
} }
pre { pre {

5
assets/js/3rd/others/clipboard.js
View File

@ -14,12 +14,11 @@ NexT.plugins.others.clipboard = function () {
let lang = codeblock.className; let lang = codeblock.className;
let copyBtn = document.createElement('div'); let copyBtn = document.createElement('div');
copyBtn.classList.add('copy-btn'); copyBtn.classList.add('copy-btn');
codeblock.parentNode .appendChild(copyBtn); codeblock.parentNode.appendChild(copyBtn);
element.addEventListener('mouseleave', () => { element.addEventListener('mouseleave', () => {
setTimeout(() => { setTimeout(() => {
copyBtn.classList.remove('copied'); copyBtn.classList.remove('copied','uncopied');
copyBtn.classList.remove('copieduncopied');
}, 300); }, 300);
}); });