Как запускать анимацию заново во Vue при каждом activated компонента?

Question

[Сергей]

Есть такой Vue компонент

<template>
  <div v-if="items.length" class="chat-wrap" :class="{'reverse': !alignLeftMode}">
    <div class="chat-user" :class="{'reverse': !alignLeftMode}">
      <Transition name="chat_user" appear>
        <img :style="{ transitionDelay: (items.length - 1) * 0.2 + 's' }" src="../../assets/images/svg/chat-user.svg" />
      </Transition>
    </div>
    <div class="chat-history">
      <template v-for="(value, key) in items" :key="key">
        <Transition name="chat_list" appear>
          <div class="chat-item" :style="{ transitionDelay: key * 0.2 + 's' }"
               :class="[templateClassItem, !alignLeftMode ? 'reverse' : '']">{{ value }}</div>
        </Transition>
      </template>
    </div>
  </div>
</template>

при mounted срабатывает анимация через css классы, как сделать чтобы анимация при хуке activated срабатывала каждый раз заново а не только первый раз при mounted компонента?

Answer 1

[Farkl]

ну классы меняй в deactivated и activated