From 26f36810c9423d3f50d4a6129fa047e4370a27c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= <elkan1788@139.com>
Date: Mon, 20 Jun 2022 16:07:50 +0800
Subject: [PATCH] :lipstick: :bug: Fixed the comment component animation style.

---
 .../_common/scaffolding/animation/hover.scss  |  0
 .../_common/scaffolding/animation/index.scss  |  2 +
 .../_common/scaffolding/animation/show.scss   | 65 +++++++++++++++++++
 assets/css/_common/scaffolding/index.scss     |  1 +
 assets/js/utils.js                            |  9 ++-
 layouts/partials/head/style.html              |  1 -
 6 files changed, 72 insertions(+), 6 deletions(-)
 rename static/css/hover.css => assets/css/_common/scaffolding/animation/hover.scss (100%)
 create mode 100644 assets/css/_common/scaffolding/animation/index.scss
 create mode 100644 assets/css/_common/scaffolding/animation/show.scss

diff --git a/static/css/hover.css b/assets/css/_common/scaffolding/animation/hover.scss
similarity index 100%
rename from static/css/hover.css
rename to assets/css/_common/scaffolding/animation/hover.scss
diff --git a/assets/css/_common/scaffolding/animation/index.scss b/assets/css/_common/scaffolding/animation/index.scss
new file mode 100644
index 0000000..ab096bc
--- /dev/null
+++ b/assets/css/_common/scaffolding/animation/index.scss
@@ -0,0 +1,2 @@
+@import 'show';
+@import 'hover';
\ No newline at end of file
diff --git a/assets/css/_common/scaffolding/animation/show.scss b/assets/css/_common/scaffolding/animation/show.scss
new file mode 100644
index 0000000..4c0fd6b
--- /dev/null
+++ b/assets/css/_common/scaffolding/animation/show.scss
@@ -0,0 +1,65 @@
+// tabshow animation
+@-moz-keyframes tabshow {
+  0% {
+    -webkit-transform: translateY(15px);
+    -moz-transform: translateY(15px);
+    -o-transform: translateY(15px);
+    -ms-transform: translateY(15px);
+    transform: translateY(15px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -o-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes tabshow {
+  0% {
+    -webkit-transform: translateY(15px);
+    -moz-transform: translateY(15px);
+    -o-transform: translateY(15px);
+    -ms-transform: translateY(15px);
+    transform: translateY(15px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -o-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+@-o-keyframes tabshow {
+  0% {
+    -webkit-transform: translateY(15px);
+    -moz-transform: translateY(15px);
+    -o-transform: translateY(15px);
+    -ms-transform: translateY(15px);
+    transform: translateY(15px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -o-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+@keyframes tabshow {
+  0% {
+    -webkit-transform: translateY(15px);
+    -moz-transform: translateY(15px);
+    -o-transform: translateY(15px);
+    -ms-transform: translateY(15px);
+    transform: translateY(15px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -o-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
\ No newline at end of file
diff --git a/assets/css/_common/scaffolding/index.scss b/assets/css/_common/scaffolding/index.scss
index 5cd24ed..2fb5cb7 100644
--- a/assets/css/_common/scaffolding/index.scss
+++ b/assets/css/_common/scaffolding/index.scss
@@ -11,3 +11,4 @@
 @import 'pagination';
 @import 'comments';
 @import 'fontawesome';
+@import 'animation';
diff --git a/assets/js/utils.js b/assets/js/utils.js
index abc0f0d..b71651e 100644
--- a/assets/js/utils.js
+++ b/assets/js/utils.js
@@ -258,12 +258,11 @@ NexT.utils = {
     const comms = document.querySelectorAll('.comment-wrap > div');
     button.addEventListener('click', () => {
       button.classList.toggle('move');
-      comms.forEach(function(item){
-        item.style.display = item.style.display === 'none' ? 'block' : 'none';
-        if (item.style.display === 'block') {
-          item.style.animation = "0.8s ease 0s 1 normal none running tabshow";
+      comms.forEach(function(item){        
+        if (item.style.display === 'none') {
+          item.style.cssText = "display: block; animation: tabshow .8s";
         } else {
-          item.style.removeProperty('animation');
+          item.style.cssText = "display: none;"
         }
       });
     });
diff --git a/layouts/partials/head/style.html b/layouts/partials/head/style.html
index 7b54c39..f2f8889 100644
--- a/layouts/partials/head/style.html
+++ b/layouts/partials/head/style.html
@@ -22,7 +22,6 @@
 {{- $scss = $scss | resources.ExecuteAsTemplate "main.scss" .  }}
 {{- $css := $scss | toCSS (dict "targetPath" "/css/main.css" "outputStyle" "expanded") }}
   <link rel="stylesheet" href="{{ $css.RelPermalink }}">
-  <link rel="stylesheet" href="/css/hover.css">
 {{- if .IsPage }}
   <style type="text/css">
     .post-footer hr:after {