javascript - Wie kann ich überprüfen, ob eine Animation in Vue Nativescript beendet ist?

Ich habe diese Lösung für Vue.js gefunden, aber Vue NativeScript unterstützt den v-on Hook nicht

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

Ich weise gerade eine Klasse zu, wenn eine Animation abgespielt werden muss:

Vorlage

<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);}
}

Dies sollte eine Funktion auslösen

 animend() {
      //do something
    }

Antwort #1

Ich glaube nicht, dass man in NativeScript Rückrufe für deklarative Animationen erhält.

Du musst imperative Syntax verwenden, um die volle Kontrolle über die Animation zu erhalten. Lies mehr in den Animationsdokumenten.

Antwort #2

Willkommen bei SO! Versuche, einen Ereignis-Listener zu deiner Bildreferenz wie folgt hinzuzufügen:

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

Beispiel :

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>

versuchen Sie, einen detaillierteren Verweis für Ihr Bild anstelle von Bild anzugeben

Referenz :

https://developer.mozilla.org/de/docs/Web/API/HTMLElement/transitionend_event