Is there a way to determine when an animation finishes in Vue Nativescript?

Question

Is there a way to determine when an animation finishes in Vue Nativescript?

Vue Nativescript does not support the v-on hook, even though I found a solution for VueJS.

Check out the solution here

Currently, I am applying a class to trigger an animation:

Template

<Image
  ref="Image"
  :class="{scaleOut: scaleOutIsActive}"
  v-on:animationend="animend" //this does not work
  v-on:transitionend="animend" //this does not 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 is supposed to trigger a function:

 animend() {
      //do something
    }

javascript typescript vue.js nativescript nativescript-vue

Answer 1

Answer №1

It seems like declarative animations in NativeScript do not provide callbacks.

To have complete control over animation, you must resort to using imperative syntax. For more information, visit Animation Docs

Answer 2

It seems like declarative animations in NativeScript do not provide callbacks.

To have complete control over animation, you must resort to using imperative syntax. For more information, visit Animation Docs

Answer 3

Answer №2

Hello and welcome to Stack Overflow! Have you tried attaching an event listener to your image reference like this:

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

Here is an 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>

Consider using a more specific reference for your image instead of Image

For more information, you can visit this reference:

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

Answer 4

Hello and welcome to Stack Overflow! Have you tried attaching an event listener to your image reference like this:

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

Here is an 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>

Consider using a more specific reference for your image instead of Image

For more information, you can visit this reference:

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

Is there a way to determine when an animation finishes in Vue Nativescript?

Answer №1

Answer №2

Similar questions

Querying through a database containing 1 million <string Name, int score> pairs efficiently within sub-linear time

Modifying the href attribute of a hyperlink with jQuery

What is the best way to utilize a single npm module in multiple TypeScript files?

Stop React Form from automatically submitting by preventing automatic submission

Neither the view nor the controller are being properly loaded into the index.html file

Exploring the depths of nested JSON with Angular2

Error TS 2322 - The property 'id' is not present in the object of type '{ id: number'

Learn the simple steps to duplicate events using ctrl, drag, and drop feature in FullCalendar v5 with just pure JavaScript

Google Chrome is unable to process Jquery JSON .each() function

"Creating a visual representation of models exchanged between the client and server through Rest

Utilizing AXIOS and .NET 5 Web API for Managing Access and Refresh Tokens

Using identical content in various template slots

Adjust the size of an IFRAME to eliminate scrollbars from appearing

Tips for optimizing endless scroll implementation by consolidating multiple requests into a single AJAX call

What are the implications of utilizing props value with a React hook?

Can WebDriver (HtmlUnit, Ruby bindings) be configured to bypass JavaScript exceptions?

Angular 2 module transpilation services

JS implementing a listener to modify a Google Map from a separate class

Forward user to a subdomain once they have successfully logged in on an Angular 2 application

Tips on altering the color of Vuetify v-icon using CSS