chore: 应用分享页消息列表滚动置底调整

src/views/share/components/message-list.vue

@@ -83,12 +83,28 @@ function handleScrollToBottom() {
       <ContinueQuestion :continuous-question-list="continuousQuestionList" />
     </div>
 
-    <div
-      v-show="visible"
-      class="flex-center hover:text-theme-color absolute bottom-5 right-5 h-6 w-6 cursor-pointer rounded-full bg-white shadow-[0_0_0_1px_#ededed]"
-      @click.stop="clickBackBottom"
-    >
-      <i class="iconfont icon-left rotate-270 text-sm" />
-    </div>
+    <Transition name="back-bottom-btn" mode="out-in">
+      <div
+        v-show="visible"
+        class="flex-center hover:text-theme-color absolute bottom-5 right-5 h-6 w-6 cursor-pointer rounded-full bg-white shadow-[0_0_0_1px_#ededed]"
+        @click.stop="clickBackBottom"
+      >
+        <i class="iconfont icon-huidaodibu text-sm" />
+      </div>
+    </Transition>
   </main>
 </template>
+
+<style lang="scss" scoped>
+.back-bottom-btn-enter-active,
+.back-bottom-btn-leave-active {
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-property: opacity;
+}
+
+.back-bottom-btn-enter-from,
+.back-bottom-btn-leave-to {
+  opacity: 0;
+}
+</style>

src/views/share/components/mobile/message-list.vue

@@ -81,9 +81,11 @@ function handleScrollToBottom() {
       <ContinueQuestion v-model:continuous-question-list="continuousQuestionList" :type="'continuous'" />
     </div>
 
-    <div v-show="visible" class="back-bottom-btn" @click.stop="clickBackBottom">
-      <i class="iconfont icon-left back-bottom-btn-icon" />
-    </div>
+    <Transition name="back-bottom-btn" mode="out-in">
+      <div v-show="visible" class="back-bottom-btn" @click.stop="clickBackBottom">
+        <i class="iconfont icon-huidaodibu back-bottom-btn-icon" />
+      </div>
+    </Transition>
   </main>
 </template>
 
@@ -99,8 +101,20 @@ function handleScrollToBottom() {
     @apply flex-center hover:text-theme-color absolute bottom-[20px] right-[20px] h-[24px] w-[24px] cursor-pointer rounded-full bg-white shadow-[0_0_0_1px_#ededed];
 
     &-icon {
-      @apply rotate-270 text-[14px];
+      @apply text-[14px];
     }
   }
 }
+
+.back-bottom-btn-enter-active,
+.back-bottom-btn-leave-active {
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-property: opacity;
+}
+
+.back-bottom-btn-enter-from,
+.back-bottom-btn-leave-to {
+  opacity: 0;
+}
 </style>