Vuetify - дождаться завершения анимации пульсации нажмите / маршрут

Question

Я застрял с волновым эффектом на <v-btn> (или другом элементе, который его использует).

У меня есть кнопка на подстранице, которая перенаправляет на индекс.

<v-btn to="/index">Back to index</v-btn>` 

После нажатия маршрутизатор возвращается к /index, но анимация vuetify пульсации прерывается, потому что переход на страницу индекса происходит немедленно. Это выглядит ужасно. Можно ли отложить событие щелчка, чтобы завершить волновой эффект?

Рабочий пример: https://jsfiddle.net/4a0o5zp6/

Если вы просто нажмете кнопку «Вернуться к индексу» из На странице «О программе» она прыгает быстро. Если вы попытаетесь какое-то время удерживать нажатой кнопку и отпустить ее, она будет выглядеть так.

Answer 1

Это не идеальное решение для реализации - подумайте об этом ;-) - но оно работает.

Вы можете прослушать событие click на кнопке и отложить изменение маршрутов, используя setTimeout.

Решение :

<v-btn @click="delayAnimationGo('index')">Back to index</v-btn> // use any method name

name: 'AboutView',
methods: {
  delayAnimationGo(destination) {
    setTimeout(() => {
      this.$router.push(`/${destination}`)
    }, 150); // should be just right
  }
},

Примечание : если вы хотите часто использовать эту функцию в своих компонентах, подумайте о создании mixin или RenderlessComponent , поэтому вы не будете повторять свой код.

Answer 2

Вы можете отключить эффект ряби на своей кнопке:

<v-btn :ripple="false" >

Чтобы отложить перемещение маршрута, вы можете использовать событие щелчка, чтобы изменить маршрут, используя вместо этого функцию, а затем использовать функцию setTimeout для создания задержка.