diff --git a/assets/css/_common/scaffolding/highlight/copy-code.scss b/assets/css/_common/scaffolding/highlight/copy-code.scss index ad3e72e..b1eeff8 100644 --- a/assets/css/_common/scaffolding/highlight/copy-code.scss +++ b/assets/css/_common/scaffolding/highlight/copy-code.scss @@ -37,7 +37,8 @@ font-variant: normal; line-height: 1; text-rendering: auto; - padding-right: .25rem; + padding-right: .25rem; + transition: content 1s ease-in-out; &::before { content: "\f102"; @@ -61,9 +62,18 @@ > .chroma { 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 { - display: none; + max-height: 0; + opacity: 0; + visibility: hidden; + + animation-name: slideInUp; + animation-duration: 1s; } pre { diff --git a/assets/js/3rd/others/clipboard.js b/assets/js/3rd/others/clipboard.js index f4743ab..e1a6f73 100644 --- a/assets/js/3rd/others/clipboard.js +++ b/assets/js/3rd/others/clipboard.js @@ -14,12 +14,11 @@ NexT.plugins.others.clipboard = function () { let lang = codeblock.className; let copyBtn = document.createElement('div'); copyBtn.classList.add('copy-btn'); - codeblock.parentNode .appendChild(copyBtn); + codeblock.parentNode.appendChild(copyBtn); element.addEventListener('mouseleave', () => { setTimeout(() => { - copyBtn.classList.remove('copied'); - copyBtn.classList.remove('copieduncopied'); + copyBtn.classList.remove('copied','uncopied'); }, 300); }); @@ -29,8 +28,8 @@ NexT.plugins.others.clipboard = function () { ch.classList.add(lang); ch.insertAdjacentHTML('afterbegin', ''); - ch.addEventListener('click', function () { - element.classList.toggle('hidden-code'); + ch.addEventListener('click', function () { + element.classList.toggle('hidden-code'); ch.querySelector('.collapse-btn').classList.toggle('collapse'); }, false);