使用 nuxt-link 时 IntersectionObserver 不起作用

Question

我使用 IntersectionObserver 在元素可见时添加 class，这样我就可以在我的 nuxt 项目中添加 fade-in/out 动画。它运行良好，但如果我使用 nuxt-link 更改页面（或返回同一页面），IntersectionObserver 不会添加 class（所以一切都是 opacity: 0）

这是我的主要 nuxt 布局中的 Intersection observer 脚本 (default.vue)

mounted() {

  const animate = document.querySelectorAll('.animate');

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('in')
      } else {
        entry.target.classList.remove('in')
      }
    })
  }, {
   rootMargin: '-15px',
  })

  animate.forEach(entry => {
    observer.observe(entry);
  });

},

每次我使用 nuxt-link

更改页面时，我都希望此代码运行

Answer 1

我刚刚在 Nuxt 页面上实现了 IntersectionObserver，而不是布局，并且刚刚测试了它 - 它运行良好。

我觉得 Nuxt 正在做一些布局，其中组件保持活动状态而不是重新安装，但观察者由于某种原因被关闭。

我还没有测试过这个，但我想你可以在布局中为 this.$route.name 设置一个观察者。

当这个观察者被触发时，你可以绑定观察者。

确保设置 immediate:true 以便它在第一次渲染时运行。

像这样：

computed: {
    routeName() {
        return this.$route.name;
    }
},

watch: {
  routeName: {
    immediate: true,
    handler() {
      // Bind observer here
    },
  },
},

这应该给你一个起点。您可能还需要手动处理观察者以确保没有重复项。也许您可以以某种方式检查观察者是否已设置，如果没有则只初始化一个新观察者。

也可以在 $route 对象本身上做一个 deep 观察者。

使用 nuxt-link 时 IntersectionObserver 不起作用

IntersectionObserver doesn't work while using nuxt-link

vue.js

nuxt.js

intersection-observer

nuxtjs