如何检查动画是否已在 Vue Nativescript 中结束？

Question

我为 vuejs 找到了这个解决方案，但是 vue nativescript 不支持 v-on hook

我目前正在分配 class 动画必须播放时：

模板

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

这应该会触发一个函数

 animend() {
      //do something
    }

Answer 1

欢迎来到 SO！尝试像这样向您的图像引用添加一个事件侦听器：

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

示例：

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>

尝试为您的图像指定更详细的参考，而不是图像

参考：

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

Answer 2

我认为您不会在 NativeScript 中获得声明性动画的回调。

您必须使用命令式语法才能完全控制动画。在 Animation Docs

阅读更多内容

如何检查动画是否已在 Vue Nativescript 中结束？

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

javascript

typescript

vue.js

nativescript

nativescript-vue