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
    }

score 2 · Accepted Answer · answered Feb 21 '20 at 15:45

2

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

answered Feb 21 '20 at 15:45

Manoj

21,753
3
20
41

Adrian A · Answer 2 · 2020-02-21T10:55:18.223

Welcome to SO! Try adding an event listener to your image ref like this :

   let vm = this;
    this.$refs.Image.addEventListener('transitionend', () => {
          vm .animend();
    })

example:

new Vue({
  el: "#app",
  data: {
    show: false,
    caughtEvent: false
  },
  mounted() {
   this.$refs.divtest.addEventListener('transitionend', () => {
     console.log("transition end")
    })
   setTimeout(() => {
     this.show = true
    }, 3000)
  }
})

.divtest {
    background: blue;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.divtest.loading {
    opacity: 1;
    background: red;
    transition: opacity 2s ease-in-out, background 1s ease-in;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <div ref="divtest" class="divtest" :class="{'loading' : show}">Bye bye</div>
</div>

try specifying a more detailed ref for your image insteaf of Image

reference:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event

Thanks! And thank you for your detailed answer as well, though I don't seem to get it to work with nativescript vue. I expected it to work the same way since it also supports eventListeners. — Amazix, Feb 21 '20 at 11:24

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

2 Answers2