Vue.js animacje nie działają prawidłowo.

0

Cześć. Mam pewien problem z animacjami w Vue.js
Mam klasę css np

.fade-in-left {
  animation: fadeInLeft;
  animation-duration: 1s
}

korzystam z biblioteki https://animate.style
mam jakiś is component, coś w stylu

<component :is="currentComponent"></component>

załóżmy, że animacja ma się wykonać np na h1. I teraz, jeśli ten currentComponent podmienię na zupełnie inny komponent animacja wykona się prawidłowo, jednak jeśli zmienię dane w raz podmienionym komponencie animacja zadziała tylko raz. Mam nadzieję że ktoś wie o co chodzi, nie potrafię tego lepiej wyjaśnić. Trochę tak jakby podczas podmiany danych potrzebny był jakiś reset, tak aby animacja wykonała się raz jeszcze

1

Link do stackoverflow: https://stackoverflow.com/a/42537780
Przykład na jsfiddle (też ze stackoverflow): https://jsfiddle.net/jx52bfpc/2/

Chodzi Ci o coś takiego? Wtedy za każdym razem jak zmienia się :key="value" zostaje odpalona nowa animacja

<transition name="slide-fade" mode="out-in">
  <div :key="value">
    {{ value }}
  </div>
</transition>

1 użytkowników online, w tym zalogowanych: 0, gości: 1