环境

• Rails: 6.1.3.2
• Ruby: 3.0.1
• AOS: 2.3.4

---

AOS 的介绍

Animate On Scroll 官网: https://michalsnik.github.io/aos/

---

步骤

1. 安装AOS包

yarn install aos

2. 创建app/javascript/animate_on_scroll.js文件。注意：文件不能命名为aos.js。

import AOS from 'aos';

document.addEventListener('DOMContentLoaded', function() {
    AOS.init();
});

3. 在app/javascript/packs/application.js中添加一行

//其他 import 的内容...
import 'animate_on_scroll.js'

4. 在app/javascript/styles/application.scss中加入一行，没有则创建

@import '~aos/dist/aos';

5. 随便找个页面，加入以下内容测试

<div data-aos="fade-down" style="height: 100vh; background: cadetblue"></div>
<div style="height: 100vh; background: aqua">
    <div data-aos="fade-left" style="margin-left: 20em"><h2>Haha</h2></div>
</div>
<div data-aos="fade-right" style="height: 100vh; background: rebeccapurple"></div>
<div data-aos="fade-up" style="height: 100vh; background: indianred"></div>

---

AOS 的用法

AOS github ： https://github.com/michalsnik/aos

---

参考

How to include custom JS (AOS.js specifically) in Rails 6

---

写在最后

最後までご覧いただいてありがとうございます