@Sector567

Почему anime.js не работает по клику во vuejs?

Есть вот такой компонент.
Сейчас, благодаря mounted() анимация успешно отрабатывает при обновлении страницы, но вот по клику анимация почему-то не воспроизводится. Консоль лог по клику выводится, а анимации нет. В чем я допустил ошибку?

P.S. ошибки в консоли нет, но при этом, если я в методе testClickGo() не буду писать return, то ошибка будет вида:
"Cannot read property 'restart'". Я это к тому, что 'restart' он видит в данной библиотеке, но почему-то анимацию не запускает.
<template>
	<div class="compHeader">
		<h1 class="testVal" style="position: absolute;">QWERTY</h1>
		<button type="button" class="testClick" @click="testClickGo().restart">+</button>
	</div>
</template>

<script>
	export default {
		methods: {
			testClickGo(){
				console.log(111);
				return this.$anime({
					targets: '.testVal',
					translateX: 200,
					delay: 800
				});
			}
		},
		mounted(){
			this.testClickGo();
		}
	}
</script>
  • Вопрос задан
  • 112 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
@click="testClickGo().restart"

То есть, попробовать вызвать метод вы не догадались. Это печально.

И если уж вы собираетесь анимацию перезапускать, наверное, надо вместо создания новых объектов сохранить ссылку на тот, что был создан при первом запуске.

targets: '.testVal',

Так не надо, используйте ref.

data: () => ({
  anime: null,
}),
mounted() {
  this.anime = this.$anime({
    targets: this.$refs.animeEl,
    translateX: 200,
    delay: 800,
  });
},

<h1 ref="animeEl">hello, world!!</h1>
<button @click="anime.restart()">click me</button>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы