Vue项目中如何全局导入animate.js并确保DOM加载完成后执行？

你的问题核心在于：初始执行DOM查询时，路由组件还未渲染（动态加载），导致无法捕获到.animate-opacity元素；而静态引入的脚本只会在页面初始加载时执行一次，不会监听后续路由切换带来的DOM变化。以下是两种可行的解决思路：

方法1：封装可复用函数+监听路由变化 #

先把动画逻辑封装成可调用的函数，在Vue挂载后执行一次，并且监听路由切换事件，每次路由完成后重新执行DOM查询和观察。

1. 修改animate.js，封装函数 #

// animate.js
export function initAnimateOpacity() {
  const observerOpacity = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animated-opacity');
      }
    });
  });

  // 每次调用时重新查询所有目标元素
  const animatedOpacity = document.querySelectorAll('.animate-opacity');
  animatedOpacity.forEach((el) => observerOpacity.observe(el));
}

2. 在main.js中导入并调用 #

import { createApp } from 'vue'
import './resources/css/app.pcss'
import App from './App.vue'
import router from "./router/index.js"
import { initAnimateOpacity } from './resources/js/animate.js'

const app = createApp(App).use(router)

app.mount('#app')

// 初始挂载完成后执行一次
initAnimateOpacity()

// 监听路由切换，每次页面跳转后重新执行
router.afterEach(() => {
  initAnimateOpacity()
})

方法2：封装Vue自定义指令（推荐） #

这种方式更贴合Vue的生态，利用组件生命周期自动绑定观察逻辑，无需手动监听路由或DOM变化。

1. 创建自定义指令文件 #

新建directives/animateOpacity.js：

// directives/animateOpacity.js
export default {
  mounted(el) {
    // 组件挂载后，直接观察当前元素
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.classList.add('animated-opacity');
          observer.unobserve(el); // 可选：仅触发一次动画时添加
        }
      });
    });
    observer.observe(el);
  }
}

2. 在main.js全局注册指令 #

import { createApp } from 'vue'
import './resources/css/app.pcss'
import App from './App.vue'
import router from "./router/index.js"
import animateOpacity from './directives/animateOpacity.js'

const app = createApp(App).use(router)

// 全局注册v-animate-opacity指令
app.directive('animate-opacity', animateOpacity)

app.mount('#app')

3. 在组件中使用指令 #

<!-- 任意组件（包括路由组件）中直接使用 -->
<div v-animate-opacity>进入视口时自动添加动画类</div>

问题原因说明 #

• 直接在main.js导入animate.js：Vue挂载完成后，路由组件还未渲染，此时document.querySelectorAll只能捕获到App.vue中的静态元素（导航、footer）。
• 在index.html中用script引入：脚本仅在页面初始加载时执行一次，后续路由切换生成的动态组件元素不会被初始的查询捕获。

内容的提问来源于stack exchange，提问作者samuelreichor