How can I check if an animation has ended in Vue Nativescript?

Question

I found this solution for vuejs, but vue nativescript doesn' support v-on hook

https://stackoverflow.com/a/47634607/12937963

I'm currently assigning a class when an animation has to play:

Template

<Image
  ref="Image"
  :class="{scaleOut: scaleOutIsActive}"
  v-on:animationend="animend" //doesn't work
  v-on:transitionend="animend" //doesn't work
  src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Red_circle.svg/1200px-Red_circle.svg.png"
  stretch="none"
/>

CSS

.scaleOut {
    animation-name: kfOut;
    animation-duration: 1;
    animation-fill-mode: forwards;
}
@keyframes kfOut {
    from { transform: scale(1, 1); }
    to { transform: scale(1.1,1.1);}
}

This should trigger a function

 animend() {
      //do something
    }

Answer 1

I don't think you get callbacks for declarative animations in NativeScript.

You have to use imperative syntax to get full control over animation. Read more at Animation Docs