Vue 3 项目集成 AOS 动画库后动画不生效问题求助

1. 初始化时机错误 #

这是最常见的触发原因：你当前将AOS.init()放在了根实例的created生命周期中，该阶段Vue尚未完成真实DOM的渲染，AOS无法扫描到页面上携带data-aos属性的节点，因此动画无法触发。

修复代码（main.js）： #

import App from './App.vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
import { createApp } from "vue";

const app = createApp({
    render: (h) => h(App),
    // 改为在mounted阶段初始化，此时真实DOM已渲染完成
    mounted(){
        AOS.init({
            // 可按需添加配置，例：动画时长1秒
            duration: 1000,
            // 元素进入视口100px时触发动画
            offset: 100
        })
    }
});
app.mount('#app')

你也可以直接将AOS.init()写在app.mount('#app')语句之后，效果一致。

2. 动态渲染节点未触发重新扫描 #

如果携带data-aos属性的元素是通过接口请求后动态渲染、或是通过v-if控制显隐的，AOS初始化时该节点还不存在，也不会自动识别后续新增的节点。

修复方案： #

在动态内容渲染完成后，手动调用AOS.refresh()重新扫描DOM节点，例：

// 接口请求完成、数据赋值后调用
import { nextTick } from 'vue'
// ...
nextTick(() => {
  AOS.refresh()
})

3. 样式冲突或CSS未正确引入 #

• 检查全局样式中是否存在* {transition: none !important}这类强制覆盖过渡效果的代码，会直接导致AOS动画失效
• 检查打包后的产物是否正确引入了aos/dist/aos.css，如果样式丢失也不会有动画效果

4. 滚动容器配置错误 #

如果你的页面是固定高度的内部滚动布局（比如根元素设为height: 100vh，滚动的是内部容器），AOS默认监听的window滚动事件不会触发，需要在初始化时指定滚动容器：

AOS.init({
  scrollContainer: '#你的滚动容器选择器'
})

另外注意你贴的组件代码中div标签未正确闭合，要把结尾的<div>改成</div>，避免DOM渲染异常。

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