yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2026-02-04 10:14:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

added animation for delete first msg in chat

Browse Source
This commit is contained in:
Kostya
2023-11-19 16:14:38 +03:00
parent 1e7868f220
commit 7fe5a11698
2 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
luckydiamond/src/assets/css/ElementsStyles/chat.css
View File

@@ -49,11 +49,18 @@
} }
.card__user { .card__user {
margin-top: 24px;
margin: 24px 70px 0px 23px; margin: 24px 70px 0px 23px;
display: flex; 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 { .user__icon {
display: flex; display: flex;
justify-content: center; justify-content: center;

2
luckydiamond/src/pages/ChatElement.vue
View File

@@ -12,6 +12,7 @@
</div> </div>
<div class="chat__content--users"> <div class="chat__content--users">
<ul> <ul>
<transition-group name="fade" mode="out-in">
<li <li
v-for="msg in array" v-for="msg in array"
:key="msg" :key="msg"
@@ -26,6 +27,7 @@
</div> </div>
</div> </div>
</li> </li>
</transition-group>
</ul> </ul>
</div> </div>
<writechat-component @send="ClaimDatamsg"></writechat-component> <writechat-component @send="ClaimDatamsg"></writechat-component>