Как я могу проверить, закончилась ли анимация в Vue Nativescript? - PullRequest
Новая
       55

Как я могу проверить, закончилась ли анимация в Vue Nativescript?

0 голосов
/ 21 февраля 2020

Я нашел это решение для vuejs, но vue nativescript не поддерживает v-on hook

{ ссылка }

Я сейчас назначаю класс, когда анимация должна воспроизводиться:

Шаблон 

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

Ответы [ 2 ]

1 голос
/ 21 февраля 2020

Я не думаю, что вы получаете обратные вызовы для декларативной анимации в NativeScript.

Вы должны использовать императивный синтаксис, чтобы получить полный контроль над анимацией. Подробнее на Документы по анимации

0 голосов
/ 21 февраля 2020

Добро пожаловать на ТАК! Попробуйте добавить прослушиватель событий к вашей ссылке на изображение, например: 

   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

...