Skip to content

Commit 995b671

Browse files
committed
(UI) add reaction animation
1 parent df590e2 commit 995b671

File tree

1 file changed

+18
-15
lines changed

1 file changed

+18
-15
lines changed

src/ChatWindow/ChatMessage.vue

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -162,21 +162,24 @@
162162
</div>
163163
</transition>
164164
</div>
165-
<button
166-
v-for="(reaction, key) in message.reactions"
167-
v-show="reaction.length"
168-
:key="key"
169-
class="button-reaction"
170-
:class="{
171-
'reaction-me': reaction.indexOf(currentUserId) !== -1
172-
}"
173-
:style="{
174-
float: message.sender_id === currentUserId ? 'right' : 'left'
175-
}"
176-
@click="sendMessageReaction({ name: key }, reaction)"
177-
>
178-
{{ getEmojiByName(key) }}<span>{{ reaction.length }}</span>
179-
</button>
165+
166+
<transition-group name="slide-left">
167+
<button
168+
v-for="(reaction, key) in message.reactions"
169+
v-show="reaction.length"
170+
:key="key"
171+
class="button-reaction"
172+
:class="{
173+
'reaction-me': reaction.indexOf(currentUserId) !== -1
174+
}"
175+
:style="{
176+
float: message.sender_id === currentUserId ? 'right' : 'left'
177+
}"
178+
@click="sendMessageReaction({ name: key }, reaction)"
179+
>
180+
{{ getEmojiByName(key) }}<span>{{ reaction.length }}</span>
181+
</button>
182+
</transition-group>
180183
</div>
181184
</div>
182185
</div>

0 commit comments

Comments
 (0)