给评论框添加了渐显效果 (#712)

* 添加代码插件 * 修改代码语法错误 * 修改代码逻辑错误 * Update src/client/view/components/TkComments.vue Co-authored-by: iMaeGoo <mail1st@qq.com> * Update src/client/view/components/TkComments.vue Co-authored-by: iMaeGoo <mail1st@qq.com> * Update src/client/view/components/TkComments.vue Co-authored-by: iMaeGoo <mail1st@qq.com> * Update src/client/view/components/TkComments.vue Co-authored-by: iMaeGoo <mail1st@qq.com> * Update src/client/view/components/TkComments.vue Co-authored-by: iMaeGoo <mail1st@qq.com> * Update src/client/view/components/TkComments.vue Co-authored-by: iMaeGoo <mail1st@qq.com> * 评论框渐显 --------- Co-authored-by: iMaeGoo <mail1st@qq.com>
twikoojs · Jun 5, 2024 · d6ff763 · d6ff763
1 parent 288eec4
commit d6ff763
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/client/view/components/TkComment.vue b/src/client/view/components/TkComment.vue
@@ -208,7 +208,7 @@ export default {
     scrollToComment () {
       if (window.location.hash.indexOf(this.comment.id) !== -1) {
         this.$refs['tk-comment'].scrollIntoView({
-          behavier: 'smooth'
+          behavior: 'smooth'
         })
         this.$emit('expand')
       }
@@ -247,7 +247,7 @@ export default {
     onLoad () {
       if (this.comment.replies.length > 0) {
         this.$refs['tk-replies'].lastElementChild.scrollIntoView({
-          behavier: 'smooth',
+          behavior: 'smooth',
           block: 'center'
         })
       }

diff --git a/src/client/view/components/TkSubmit.vue b/src/client/view/components/TkSubmit.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tk-submit" ref="tk-submit">
+  <div class="tk-submit tk-fade-in" ref="tk-submit">
     <div class="tk-row">
       <tk-avatar :config="config" :mail="mail" :nick="nick" />
       <div class="tk-col">
@@ -374,7 +374,7 @@ export default {
   mounted () {
     if (this.pid) {
       this.$refs['tk-submit'].scrollIntoView({
-        behavier: 'smooth',
+        behavior: 'instant',
         block: 'center'
       })
     }
@@ -477,4 +477,16 @@ export default {
   border-radius: 4px;
   word-break: break-word;
 }
+.tk-fade-in {
+  animation: tkFadeIn .3s;
+}
+@keyframes tkFadeIn {
+  0% {
+    opacity: 0
+  }
+
+  to {
+    opacity: 1
+  }
+}
 </style>