aos.js介绍及其在react项目中的使用

最新推荐文章于 2025-03-15 13:04:21 发布

yujin0213

最新推荐文章于 2025-03-15 13:04:21 发布

阅读量3.7k

点赞数 1

分类专栏： JavaScript CSS

本文链接：https://blog.youkuaiyun.com/yujin0213/article/details/84532506

版权

JavaScript 同时被 2 个专栏收录

12 篇文章

订阅专栏

CSS

9 篇文章

订阅专栏

本文详细介绍AOS动画库在React项目中的应用技巧，解决页面滚动动画不触发的问题，包括正确引入、配置及使用aos属性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，在页面往回滚动时，元素会恢复到原来的状态，效果演示demo链接：http://www.jq22.com/yanshi8150
本文主要介绍aos.js在react项目中的使用，网上相关的博文较少，使用的时候踩了一些坑，所以记录一下。
一开始按照网上的教程，在项目里引用了相关的css、js，在需要动画的元素上添加aos属性，但是滚动的时候始终出不来效果，一直加不上aos-animate触发动画的这个样式

以下是具体使用方案：
1、安装aos

npm install aos

2、在react项目中的使用

// 动效aos
import AOS from 'aos';
import 'aos/dist/aos.css';

class App extends React.Component {
    constructor() {
        super();
    }

componentDidMount(){
        AOS.init({
            duration : 1000,
            easing: 'ease-out-back',  
            delay: 600
        })
    }

    render() {
        return (
            <div data-aos="fade-up" > 
              Hello world
           </div>
        );
    }
}

注意事项：
1、aos属性需要添加data-前缀，否则识别不出来
2、init函数一定要有，它可以为全局标识aos属性的节点配置相应属性，具体元素需要不同的动画属性可以在div上加，如

<div  data-aos="fade-up" data-aos-delay="400" data-aos-easing="ease"></div>

附上参考的github上相关解决方案：https://github.com/michalsnik/aos/issues/49