Nuxt过渡属性与子组件一起使用

Question

我正在尝试Nuxt的transition property。更精确地说，我使用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>

我也做了codesandbox example，以便更好地检查我的问题。 在索引页面中，您可以看到悬停时的子组件（框）有效，然后当我将页面转换为关于页面时，悬停不起作用。