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);