Переходы страницы Nuxt.js, @leave никогда не выполняется - PullRequest
Новая
       36

Переходы страницы Nuxt.js, @leave никогда не выполняется

0 голосов
/ 11 декабря 2018

Я пытаюсь использовать переходы страниц с помощью nuxt и Greensock (gsap), не получается заставить его работать.Я не хочу анимировать переходы страниц, используя только css, потому что я хочу легко объединить анимацию в цепочку для различных элементов.

Раньше с помощью Vue я мог просто использовать: 

<transition @enter="enter" @leave="leave" appear mode="out-in">
  <router-view />
</transition>

export default {
  methods: {
    enter(el, done) {
      console.log('enter');
      // ... gsap animation code
    },
    leave(el, done) {
      console.log('leave');
      // ... gsap animation code
    }
  }
}

Теперь,с Nuxt я не могу заставить его работать.Я использую точно такой же код в layout / default.vue .За исключением того, что я заменил <router-view/> на <nuxt/>.

Методы "enter", "beforeEnter" работают нормально.Он вызывается при начальной загрузке страницы, а также каждый раз, когда я меняю страницы. Однако метод "ухода" никогда не вызывается.

Что я не понимаю?Мне просто нужно одно место, чтобы управлять всеми переходами моей страницы с помощью JavaScript.Я уже некоторое время гуглю, просматривая множество примеров, я не могу понять, что я делаю неправильно.

Ответы [ 2 ]

0 голосов
/ 05 августа 2019

У меня была та же проблема, я следовал за @mstslv и использовал свойство перехода на компонентах страницы, это лучшее решение на сегодняшний день для получения правильных результатов.Вы можете программно выполнять переходы, проверяя, например, this.$route.path.

Если вы хотите избежать избыточности, вы можете использовать следующий код 

import transition from "~/plugins/transitions"

export default {
..
transition,
..
}
0 голосов
/ 19 февраля 2019

Потратил некоторое время, пытаясь решить ту же проблему, и, насколько я могу судить, вы не можете использовать компонент <transition> для задания обратных вызовов JS-ловушек вокруг компонента <nuxt/>, предположительно из-за отличной обработки маршрутизации Nuxt.

Вам необходимо определить transition свойство на каждой странице, где enter() и leave() относятся к конкретной странице .Например, если вы находитесь на домашней странице и перейдете на страницу «О программе», оба параметра «leave()» и «* 1013» приложения «Home» будут активированы.

Вы также можете определить переход по умолчанию вnuxt.config.js, но у вас будет доступ только к элементу страницы, который может не подходить для более сложных переходов.

...