环境

• 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

写在最后

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