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

【问题标题】：How can I check if an animation has ended in Vue Nativescript?如何检查动画是否在 Vue Nativescript 中结束？
【发布时间】：2020-06-05 18:41:05
【问题描述】：

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

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

当动画必须播放时，我目前正在分配一个类：

模板

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

【问题讨论】：

标签： javascript typescript vue.js nativescript nativescript-vue

【解决方案1】：

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

您必须使用命令式语法来完全控制动画。阅读更多Animation Docs

【讨论】：

【解决方案2】：

欢迎来到 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>

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

参考：

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

【讨论】：

谢谢！也感谢您的详细回答，尽管我似乎无法让它与 nativescript vue 一起使用。我希望它能够以同样的方式工作，因为它也支持 eventListeners。