环境
- Rails: 6.1.3.2
- Ruby: 3.0.1
- AOS: 2.3.4
AOS 的介绍
Animate On Scroll 官网: https://michalsnik.github.io/aos/
步骤
- 安装
AOS
包
yarn install aos
- 创建
app/javascript/animate_on_scroll.js
文件。注意:文件不能命名为aos.js
。
import AOS from 'aos';
document.addEventListener('DOMContentLoaded', function() {
AOS.init();
});
- 在
app/javascript/packs/application.js
中添加一行
//其他 import 的内容...
import 'animate_on_scroll.js'
- 在
app/javascript/styles/application.scss
中加入一行,没有则创建
@import '~aos/dist/aos';
- 随便找个页面,加入以下内容测试
<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
写在最后
最後までご覧いただいてありがとうございます