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

#1楼 票数:2 已采纳

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

您必须使用命令式语法来完全控制动画。 动画文档中阅读更多内容

#2楼 票数:-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>

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

参考:

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

  ask by Amazix translate from so

未解决问题?本站智能推荐:

1回复

如何使用打字稿在Nativescript-vue中传递对象而不是字符串?

我想在{N} Playground 代码中实现 PromptDialog 但是 Vetur 给出了以下 Typescript 错误。 这只是nativescript-vue 提示文档中的示例代码, 而是 typescript改编。 基本使用 维图错误:
1回复

Nativescript-vue。使用SVG图形、图像、图标

我想知道是否可以使用 svg 格式的图像和图标以及如何使用它。 我正在使用带有打字稿的 nativescript-vue 6.0。
3回复

如何将Typescript添加到Nativescript-Vue项目中?

我已经努力了几天让 Typescript 在一个简单的模板生成的 Nativescript-Vue 项目中工作。 这是我所做的: 用他们的命令创建项目: 按照此处的说明进行操作: https : //nativescript-vue.org/blog/using-typescript-in-nat
1回复

Nativescript-Vuedevtools不更新页面

当我从一个页面导航到另一个页面时,nativescript-vue 中来自 Vue js 的 devtools 根本不会更新。 它只显示当前页面,而不显示我导航的以下页面。 正如您在图像中看到的,它堆叠在 UserCreation 上,我正在导航到验证代码页面。 我正在使用 nativescrip
1回复

如何在nativescriptvue中从主页导航到登录页面?

我要这样做,以便可以交换登录页面 <-> 注册页面如果任何一个都成功,则我要转到应用页面 应用内组件 但是,这仅在终端中返回createcomment 。 这与导航堆栈有关,但是我不知道如何使它起作用,因为对此没有任何文档。 当我注销来注册页面它的工作原理,但不是在登
3回复

传递参数NativeScript-Vue

我正在尝试将params传递给Nativescript上的另一条路线,但它总是返回我undefined 。 我正在使用nativescript-vue-navigator 。 目前在屏幕上我正在调用以下函数 在我的地图屏幕上,我正在尝试像这样
1回复

在nativescript-vue中的ListView中获取复选框索引

我有一个for loop的ListView组件内有一个复选框 我需要获取选中项目的索引号,以便可以在数组中删除/修改它,但是我无法做到这一点,因为在Vue中没有:key prop。 这就是我渲染列表的方式。 我仍然是移动应用程序开发的新手,所以我不确定是将Label与复选框一起使用还是
1回复

如何在Nativescript中获取elementById?

我正在将 nativescript 与 vue.js 一起使用,并且正在尝试执行诸如 DOM 操作之类的操作。 这是我的模板中的示例代码: 我想通过他的 id 来获取标签元素FormattedString - formString在 javascript 中是这样的: let fs = doumen