Свойство перехода Nuxt, использующее его с дочерними компонентами - PullRequest
Новая
       37

Свойство перехода Nuxt, использующее его с дочерними компонентами

0 голосов
/ 17 апреля 2019

Я экспериментирую со свойством перехода для Nuxt. если быть более точным, я вызываю его с помощью javascript-хуков и использую anime.js .

У меня есть две страницы и дочерний компонент внутри них. У меня есть переход, где я нацеливаю дочерний компонент , чтобы оживить его при вводе страницы. Когда я перехожу с одной страницы на другую, переход работает нормально, как и ожидалось, но css дочернего компонента не работает. Это происходит только тогда, когда происходит переход.

Мой код выглядит примерно так: 

<template>
  <div>
    <h2>About page</h2>
    <n-link to="/">go to index page</n-link>

    <box/>
    <box/>
    <box/>
  </div>
</template>

<script>
import box from "~/components/box.vue";
import anime from "animejs";

export default {
  transition: {
    mode: "out-in",
    css: false,
    enter(el, done) {
      const boxs = el.querySelectorAll(".box");
      console.log(boxs);
      anime({
        targets: boxs,
        easing: "linear",
        translateY: [-50, 0],
        delay: anime.stagger(100),
        duration: 500,
        complete: function(anim) {
          if (anim.completed) done();
        }
      });
    }
  },
  components: {
    box
  }
};
</script>

<style scoped>
</style>

Я также сделал код и пример коробки для лучшего обзора моей проблемы. На странице указателя вы можете видеть дочерний компонент (блок) при наведении, затем, когда я перехожу на страницу с переходом на страницу, наведение не работает.

...