fix copy button animation

shoelace-style · Aug 12, 2021 · b0cf35d · b0cf35d
1 parent f8aff7d
commit b0cf35d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
@@ -179,7 +179,7 @@
 }
 
 .markdown-section .docsify-copy-code-button.copied {
-  animation: pulse 1s;
+  animation: pulse 0.75s;
   --pulse-color: rgb(var(--sl-color-neutral-500));
 }
 

diff --git a/docs/assets/plugins/code-block/code-block.js b/docs/assets/plugins/code-block/code-block.js
@@ -202,10 +202,12 @@
   // Show pulse when copying
   document.addEventListener('click', event => {
     const button = event.target.closest('.docsify-copy-code-button');
-
     if (button) {
       button.classList.remove('copied');
-      requestAnimationFrame(() => button.classList.add('copied'));
+      requestAnimationFrame(() => {
+        button.addEventListener('animationend', () => button.classList.remove('copied'), { once: true });
+        button.classList.add('copied');
+      });
     }
   });
 })();