feat: animate outgoing reactions

src/components/AChat/AChatReactions/AChatReaction.vue

@@ -1,6 +1,13 @@
 <template>
   <div :class="classes.root">
-    <div :class="classes.emoji">{{ asset.react_message }}</div>
+    <div
+      :class="{
+        [classes.emoji]: true,
+        [classes.emojiAnimate]: animate
+      }"
+    >
+      {{ asset.react_message }}
+    </div>
 
     <div :class="classes.avatar" v-if="$slots.avatar">
       <slot name="avatar" />
@@ -16,6 +23,7 @@ const className = 'a-chat-reaction'
 const classes = {
   root: className,
   emoji: `${className}__emoji`,
+  emojiAnimate: `${className}__emoji--animate`,
   avatar: `${className}__avatar`
 }
 
@@ -24,6 +32,10 @@ export default defineComponent({
     asset: {
       type: Object as PropType<ReactionAsset>,
       required: true
+    },
+    animate: {
+      type: Boolean,
+      required: true
     }
   },
   setup() {
@@ -52,12 +64,39 @@ export default defineComponent({
     font-size: 16px;
   }
 
+  &__emoji--animate {
+    animation: animate__heartBeat 1.5s ease-in-out;
+  }
+
   &__avatar {
     position: absolute;
     bottom: -9px;
     right: -9px;
   }
 }
+@keyframes animate__heartBeat {
+  0% {
+    transform: scale(1);
+    transform-origin: center center;
+    transition-timing-function: ease-out;
+  }
+  10% {
+    transform: scale(1.17);
+    transition-timing-function: ease-in;
+  }
+  17% {
+    transform: scale(1.24);
+    transition-timing-function: ease-out;
+  }
+  33% {
+    transform: scale(1.11);
+    transition-timing-function: ease-in;
+  }
+  45% {
+    transform: scale(1);
+    transition-timing-function: ease-out;
+  }
+}
 
 .v-theme--light {
   .a-chat-reaction {

src/components/AChat/AChatReactions/AChatReactions.vue

@@ -11,6 +11,7 @@
       :key="reaction.id"
       :class="classes.reaction"
       :asset="reaction.asset"
+      :animate="shouldAnimate(reaction)"
     >
       <template #avatar v-if="reaction.senderId === partnerId">
         <ChatAvatar :user-id="partnerId" :size="16" />
@@ -71,10 +72,17 @@ export default defineComponent({
       return list.sort((left, right) => left.timestamp - right.timestamp)
     })
 
+    const shouldAnimate = (reaction: NormalizedChatMessageTransaction) => {
+      const isLastReaction = store.getters['chat/isLastReaction'](reaction.id, partnerId.value)
+
+      return isLastReaction && store.state.chat.animateLastReaction
+    }
+
     return {
       classes,
       partnerId,
-      reactions
+      reactions,
+      shouldAnimate
     }
   }
 })

src/store/modules/chat/index.js

@@ -44,7 +44,8 @@ const state = () => ({
   chats: {},
   lastMessageHeight: 0, // `height` value of the last message
   isFulfilled: false, // false - getChats did not start or in progress, true - getChats finished
-  offset: 0 // for loading chat list with pagination. -1 if all of chats loaded
+  offset: 0, // for loading chat list with pagination. -1 if all of chats loaded
+  animateLastReaction: false // will animate the last reaction if the value is `true`
 })
 
 const getters = {
@@ -91,6 +92,13 @@ const getters = {
     return reactions[reactions.length - 1]
   },
 
+  isLastReaction: (state, getters) => (transactionId, partnerId) => {
+    const messages = getters.messages(partnerId)
+    const index = messages.findIndex((message) => message.id === transactionId)
+
+    return index === messages.length - 1
+  },
+
   /**
    * Return message by ID.
    * @param {number} id Message Id
@@ -479,6 +487,10 @@ const mutations = {
     }
   },
 
+  updateAnimateLastReaction(state, value) {
+    state.animateLastReaction = value
+  },
+
   reset(state) {
     state.chats = {}
     state.lastMessageHeight = 0
@@ -778,14 +790,16 @@ const actions = {
    * @param {string} reactMessage Emoji
    * @returns {Promise}
    */
-  sendReaction({ commit, rootState }, { recipientId, reactToId, reactMessage }) {
+  sendReaction({ dispatch, commit, rootState }, { recipientId, reactToId, reactMessage }) {
     const messageObject = createReaction({
       recipientId,
       senderId: rootState.address,
       reactToId,
       reactMessage
     })
 
+    dispatch('animateReaction', messageObject.id)
+
     commit('pushMessage', {
       message: messageObject,
       userId: rootState.address
@@ -822,6 +836,13 @@ const actions = {
       })
   },
 
+  animateReaction({ commit }) {
+    commit('updateAnimateLastReaction', true)
+    setTimeout(() => {
+      commit('updateAnimateLastReaction', false)
+    }, 1500)
+  },
+
   /**
    * Fast crypto-transfer, to display transaction in chat
    * before confirmation.