From 0b8bdc0e00f0c811e7a4dc2c33ba10dce4af7b37 Mon Sep 17 00:00:00 2001
From: elkan1788 <elkan1788@139.com>
Date: Thu, 23 Jan 2025 17:12:34 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Closed=20#108,=20add=20animated=20t?=
 =?UTF-8?q?ransition=20when=20expand=20and=20collapse=20code=20block.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_common/scaffolding/highlight/copy-code.scss   | 14 ++++++++++++--
 assets/js/3rd/others/clipboard.js                  |  9 ++++-----
 2 files changed, 16 insertions(+), 7 deletions(-)

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', 
         '<span class="code-lang"></span><span class="collapse-btn"></span>');
-      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);