From 7fe5a11698d2dcb58b65876657b2b4690dbfc557 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sun, 19 Nov 2023 16:14:38 +0300
Subject: [PATCH] added animation for delete first msg in chat

---
 .../src/assets/css/ElementsStyles/chat.css    |  9 +++++-
 luckydiamond/src/pages/ChatElement.vue        | 28 ++++++++++---------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/luckydiamond/src/assets/css/ElementsStyles/chat.css b/luckydiamond/src/assets/css/ElementsStyles/chat.css
index f2a5bb0..c98f469 100644
--- a/luckydiamond/src/assets/css/ElementsStyles/chat.css
+++ b/luckydiamond/src/assets/css/ElementsStyles/chat.css
@@ -49,11 +49,18 @@
 }
 
 .card__user {
-    margin-top: 24px;
     margin: 24px 70px 0px 23px;
     display: flex;
 }
 
+.fade-enter-active, .fade-leave-active {
+    transition: opacity 0.5s, transform 0.5s;
+}
+.fade-enter, .fade-leave-to {
+    opacity: 0;
+    transform: translateY(20px);
+}
+
 .user__icon {
     display: flex;
     justify-content: center;
diff --git a/luckydiamond/src/pages/ChatElement.vue b/luckydiamond/src/pages/ChatElement.vue
index 4a20fc1..abef522 100644
--- a/luckydiamond/src/pages/ChatElement.vue
+++ b/luckydiamond/src/pages/ChatElement.vue
@@ -12,20 +12,22 @@
     </div>
     <div class="chat__content--users">
       <ul>
-        <li
-            v-for="msg in array"
-            :key="msg"
-        >
-          <div class="card__user">
-            <div class="user__icon">
-              <img :src="msg.icon">
+        <transition-group name="fade" mode="out-in">
+          <li
+              v-for="msg in array"
+              :key="msg"
+          >
+            <div class="card__user">
+              <div class="user__icon">
+                <img :src="msg.icon">
+              </div>
+              <div class="content">
+                <h1>{{ msg.username }}</h1>
+                <p>{{ msg.msg }}</p>
+              </div>
             </div>
-            <div class="content">
-              <h1>{{ msg.username }}</h1>
-              <p>{{ msg.msg }}</p>
-            </div>
-          </div>
-        </li>
+          </li>
+        </transition-group>
       </ul>
     </div>
     <writechat-component @send="ClaimDatamsg"></writechat-component>