Add transition to chat messages

olzhasar · Mar 12, 2024 · 5420d8c · 5420d8c
1 parent a5ccbea
commit 5420d8c
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/frontend/src/pages/Chat.vue b/frontend/src/pages/Chat.vue
@@ -190,9 +190,16 @@ const notifyStopTyping = () => {
       id="messageList"
       class="overflow-y-scroll flex-grow pr-2 space-y-2 no-scrollbar"
     >
-      <div v-for="msg in messages">
-        <MessageDiv :msg="msg" />
-      </div>
+      <TransitionGroup
+        tag="div"
+        enter-from-class="opacity-0 -translate-x-10"
+        enter-to-class="opacity-100 translate-x-0"
+        enter-active-class="duration-200 ease-in transform"
+      >
+        <div v-for="(msg, index) in messages" :key="index">
+          <MessageDiv :msg="msg" />
+        </div>
+      </TransitionGroup>
 
       <div v-if="personTyping" class="chat chat-start">
         <div class="opacity-60 chat-footer">