aos-modern 3.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +180 -168
  2. package/README.zh-CN.md +186 -168
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,11 +1,13 @@
1
- [![AOS - Animate on scroll library](https://s32.postimg.org/ktvt59hol/aos_header.png)](https://gabulaideu.github.io/aos/)
1
+ # AOS Modern
2
2
 
3
- [![NPM version](https://img.shields.io/npm/v/aos-modern.svg?style=flat)](https://npmjs.org/package/aos-modern)
4
- [![NPM downloads](https://img.shields.io/npm/dm/aos-modern.svg?style=flat)](https://npmjs.org/package/aos-modern)
5
- [![Build Status](https://travis-ci.org/michalsnik/aos.svg?branch=master)](https://travis-ci.org/michalsnik/aos)
6
- [![Gitter](https://badges.gitter.im/michalsnik/aos.svg)](https://gitter.im/michalsnik/aos?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
3
+ [English](./README.md) | [简体中文](./README.zh-CN.md)
7
4
 
8
- [![Twitter Follow](https://img.shields.io/twitter/follow/michalsnik.svg?style=social)](https://twitter.com/michalsnik) [![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/home?status=AOS%20-%20Animate%20on%20Scroll%20library%0Ahttps%3A//github.com/michalsnik/aos)
5
+ ---
6
+
7
+ [![AOS - Animate on scroll library](https://gabulaideu.github.io/aos/logo.svg)](https://gabulaideu.github.io/aos/)
8
+
9
+ [![NPM version](https://img.shields.io/npm/v/aos-modern.svg?style=flat)](https://www.npmjs.com/package/aos-modern)
10
+ [![NPM downloads](https://img.shields.io/npm/dm/aos-modern.svg?style=flat)](https://www.npmjs.com/package/aos-modern)
9
11
 
10
12
  Small library to animate elements on your page as you scroll.
11
13
 
@@ -20,15 +22,10 @@ If you scroll back to top, elements will animate to it's previous state and are
20
22
 
21
23
  ### 🚀 [Demo](https://gabulaideu.github.io/aos/)
22
24
 
23
- ### 🌟 Codepen Examples
24
- - [Different build in animations](http://codepen.io/michalsnik/pen/WxNdvq)
25
- - [With anchor setting in use](http://codepen.io/michalsnik/pen/jrOYVO)
26
- - [With anchor-placement and different easing](http://codepen.io/michalsnik/pen/EyxoNm)
27
- - [With simple custom animations](http://codepen.io/michalsnik/pen/WxvNvE)
28
-
29
25
  ---
30
26
 
31
27
  ## ❗ Attention
28
+
32
29
  From version `2.0.0` attributes `aos` are no longer supported, always use `data-aos`.
33
30
 
34
31
  ## ⚙ Setup
@@ -37,73 +34,81 @@ From version `2.0.0` attributes `aos` are no longer supported, always use `data-
37
34
 
38
35
  - Using `npm` or `yarn`
39
36
 
40
- ```bash
41
- npm install aos-modern --save
42
- # or
43
- yarn add aos-modern
44
- ```
37
+ ```bash
38
+ npm install aos-modern --save
39
+ # or
40
+ yarn add aos-modern
41
+ ```
45
42
 
46
43
  - Direct download -> [click here](https://github.com/gabulaideu/aos/archive/master.zip)
47
44
 
48
-
49
45
  ### Link styles
50
46
 
51
- ```html
47
+ - **CDN**:
48
+ ```html
49
+ <link rel="stylesheet" href="https://unpkg.com/aos-modern@latest/dist/aos.css" />
50
+ ```
51
+ - **Local**:
52
+ ```html
52
53
  <link rel="stylesheet" href="node_modules/aos-modern/dist/aos.css" />
53
- ```
54
+ ```
54
55
 
55
56
  ### Add scripts
56
57
 
57
- ```html
58
+ - **CDN**:
59
+ ```html
60
+ <script src="https://unpkg.com/aos-modern@latest/dist/aos.js"></script>
61
+ ```
62
+ - **Local**:
63
+ ```html
58
64
  <script src="node_modules/aos-modern/dist/aos.js"></script>
59
- ```
65
+ ```
60
66
 
61
67
  AOS from version `1.2.0` is available as UMD module, so you can use it as AMD, Global, Node or ES6 module.
62
68
 
63
69
  ### Init AOS
64
70
 
65
71
  ```javascript
66
- <script>
67
- AOS.init();
68
- </script>
72
+ <script>AOS.init();</script>
69
73
  ```
70
74
 
71
75
  ## 🤔 How to use it?
72
76
 
73
77
  ### Basic usage
74
78
 
75
- All you have to do is to add `data-aos` attribute to html element, like so:
79
+ All you have to do is to add `data-aos` attribute to html element, like so:
76
80
 
77
81
  ```html
78
- <div data-aos="animation_name">
82
+ <div data-aos="animation_name"></div>
79
83
  ```
80
84
 
81
- Script will trigger "animation_name" animation on this element, if you scroll to it.
85
+ Script will trigger "animation_name" animation on this element, if you scroll to it.
82
86
 
83
- [Down below](https://github.com/gabulaideu/aos#-animations) is a list of all available animations for now :)
87
+ [Down below](https://github.com/gabulaideu/aos#-animations) is a list of all available animations for now :)
84
88
 
85
89
  ### 🔥 Advanced settings
86
90
 
87
91
  These settings can be set both on certain elements, or as default while initializing script (in options object without `data-` part).
88
92
 
89
- | Attribute | Description | Example value | Default value |
90
- |---------------------------|-------------|---------------|---------|
91
- | *`data-aos-offset`* | Change offset to trigger animations sooner or later (px) | 200 | 120 |
92
- | *`data-aos-duration`* | *Duration of animation (ms) | 600 | 400 |
93
- | *`data-aos-easing`* | Choose timing function to ease elements in different ways | ease-in-sine | ease |
94
- | *`data-aos-delay`* | Delay animation (ms) | 300 | 0 |
95
- | *`data-aos-anchor`* | Anchor element, whose offset will be counted to trigger animation instead of actual elements offset | #selector | null |
96
- | *`data-aos-anchor-placement`* | Anchor placement - which one position of element on the screen should trigger animation | top-center | top-bottom |
97
- | *`data-aos-once`* | Choose wheter animation should fire once, or every time you scroll up/down to element | true | false |
93
+ | Attribute | Description | Example value | Default value |
94
+ | ----------------------------- | --------------------------------------------------------------------------------------------------- | ------------- | ------------- |
95
+ | _`data-aos-offset`_ | Change offset to trigger animations sooner or later (px) | 200 | 120 |
96
+ | _`data-aos-duration`_ | \*Duration of animation (ms) | 600 | 400 |
97
+ | _`data-aos-easing`_ | Choose timing function to ease elements in different ways | ease-in-sine | ease |
98
+ | _`data-aos-delay`_ | Delay animation (ms) | 300 | 0 |
99
+ | _`data-aos-anchor`_ | Anchor element, whose offset will be counted to trigger animation instead of actual elements offset | #selector | null |
100
+ | _`data-aos-anchor-placement`_ | Anchor placement - which one position of element on the screen should trigger animation | top-center | top-bottom |
101
+ | _`data-aos-once`_ | Choose wheter animation should fire once, or every time you scroll up/down to element | true | false |
98
102
 
99
- *Duration accept values from 50 to 3000, with step 50ms, it's because duration of animation is handled by css, and to not make css longer than it is already I created implementations only in this range. I think this should be good for almost all cases.
103
+ \*Duration accept values from 50 to 3000, with step 50ms, it's because duration of animation is handled by css, and to not make css longer than it is already I created implementations only in this range. I think this should be good for almost all cases.
100
104
 
101
105
  If not, you may write simple CSS on your page that will add another duration option value available, for example:
102
106
 
103
107
  ```css
104
- body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{
105
- transition-duration: 4000ms;
106
- }
108
+ body[data-aos-duration="4000"] [data-aos],
109
+ [data-aos][data-aos][data-aos-duration="4000"] {
110
+ transition-duration: 4000ms;
111
+ }
107
112
  ```
108
113
 
109
114
  This code will add 4000ms duration available for you to set on AOS elements, or to set as global duration while initializing AOS script.
@@ -117,28 +122,39 @@ Down below you can find list of all anchor-placement options.
117
122
  #### Examples:
118
123
 
119
124
  ```html
120
- <div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">
125
+ <div
126
+ data-aos="fade-zoom-in"
127
+ data-aos-offset="200"
128
+ data-aos-easing="ease-in-sine"
129
+ data-aos-duration="600"
130
+ ></div>
121
131
  ```
132
+
122
133
  ```html
123
- <div data-aos="flip-left" data-aos-delay="100" data-aos-anchor=".example-selector">
134
+ <div
135
+ data-aos="flip-left"
136
+ data-aos-delay="100"
137
+ data-aos-anchor=".example-selector"
138
+ ></div>
124
139
  ```
140
+
125
141
  ```html
126
- <div data-aos="fade-up" data-aos-anchor-placement="top-center">
142
+ <div data-aos="fade-up" data-aos-anchor-placement="top-center"></div>
127
143
  ```
128
144
 
129
-
130
145
  #### API
131
146
 
132
147
  AOS object is exposed as a global variable, for now there are four methods available:
133
148
 
134
- * `init` - initialize AOS
135
- * `refresh` - recalculate all offsets and positions of elements (called on window resize)
136
- * `refreshHard` - reinit array with AOS elements and trigger `refresh` (called on DOM changes that are related to `aos` elements)
137
- * `destroy` - cleanup all scroll observers, mutation observers, and event listeners (ideal for SPA router/lifecycle cleanups)
149
+ - `init` - initialize AOS
150
+ - `refresh` - recalculate all offsets and positions of elements (called on window resize)
151
+ - `refreshHard` - reinit array with AOS elements and trigger `refresh` (called on DOM changes that are related to `aos` elements)
152
+ - `destroy` - cleanup all scroll observers, mutation observers, and event listeners (ideal for SPA router/lifecycle cleanups)
138
153
 
139
154
  Example execution:
155
+
140
156
  ```javascript
141
- AOS.refresh();
157
+ AOS.refresh();
142
158
  ```
143
159
 
144
160
  By default AOS is watching for DOM changes and if there are any new elements loaded asynchronously or when something is removed from DOM it calls `refreshHard` automatically. In browsers that don't support `MutationObserver` like IE you might need to call `AOS.refreshHard()` by yourself.
@@ -166,10 +182,10 @@ To do this, pass options object to `init()` function, like so:
166
182
 
167
183
  These settings can be set only in options object while initializing AOS.
168
184
 
169
- | Setting | Description | Example value | Default value |
170
- |---------------------------|-------------|---------------|---------|
171
- | *`disable`* | Condition when AOS should be disabled | mobile | false |
172
- | *`startEvent`* | Name of event, on which AOS should be initialized | exampleEvent | DOMContentLoaded |
185
+ | Setting | Description | Example value | Default value |
186
+ | -------------- | ------------------------------------------------- | ------------- | ---------------- |
187
+ | _`disable`_ | Condition when AOS should be disabled | mobile | false |
188
+ | _`startEvent`_ | Name of event, on which AOS should be initialized | exampleEvent | DOMContentLoaded |
173
189
 
174
190
  ##### Disabling AOS
175
191
 
@@ -187,7 +203,7 @@ There are several options that you can use to fit AOS perfectly into your projec
187
203
  `mobile` (phones and tablets), `phone` or `tablet`. This will disable AOS on those certains devices. But if you want make your own condition, simple type your statement instead of device type name:
188
204
 
189
205
  ```javascript
190
- disable: window.innerWidth < 1024
206
+ disable: window.innerWidth < 1024;
191
207
  ```
192
208
 
193
209
  There is also posibility to pass a `function`, which should at the end return `true` or `false`:
@@ -212,11 +228,13 @@ If you don't want to initialize AOS on `DOMContentLoaded` event, you can pass yo
212
228
  ```
213
229
 
214
230
  **Important note:** If you set `startEvent: 'load'` it will add event listener on `window` instead of `document`.
231
+
215
232
  ### 🖥 Local Demos
216
233
 
217
234
  AOS Modern comes with ready-to-run HTML demo pages for both the core library and the framework integrations, demonstrating advanced animations and component lifecycles.
218
235
 
219
236
  To run the demos locally:
237
+
220
238
  1. Clone this repository
221
239
  2. Install dependencies and start the development server:
222
240
  ```bash
@@ -224,11 +242,11 @@ To run the demos locally:
224
242
  yarn dev
225
243
  ```
226
244
  3. Open the following pages in your browser:
227
- - **Official Interactive Demo Portal**: [http://localhost:8080/](http://localhost:8080/)
228
- - **Core Library (Static)**: [http://localhost:8080/simple.html](http://localhost:8080/simple.html)
229
- - **Core Library (Async DOM Mutation)**: [http://localhost:8080/async.html](http://localhost:8080/async.html)
230
- - **React (useAOS Hook & Lifecycle)**: [http://localhost:8080/react.html](http://localhost:8080/react.html)
231
- - **Vue (v-aos Custom Directive)**: [http://localhost:8080/vue.html](http://localhost:8080/vue.html)
245
+ - **Official Interactive Demo Portal**: [http://localhost:8080/](http://localhost:8080/)
246
+ - **Core Library (Static)**: [http://localhost:8080/simple.html](http://localhost:8080/simple.html)
247
+ - **Core Library (Async DOM Mutation)**: [http://localhost:8080/async.html](http://localhost:8080/async.html)
248
+ - **React (useAOS Hook & Lifecycle)**: [http://localhost:8080/react.html](http://localhost:8080/react.html)
249
+ - **Vue (v-aos Custom Directive)**: [http://localhost:8080/vue.html](http://localhost:8080/vue.html)
232
250
 
233
251
  ### 📦 Framework Integrations
234
252
 
@@ -239,20 +257,16 @@ AOS provides native integrations for modern frontend frameworks (React, Vue) out
239
257
  AOS exposes a custom hook `useAOS` to handle initialization and component cleanup.
240
258
 
241
259
  ```javascript
242
- import React from 'react';
243
- import { useAOS } from 'aos/react';
260
+ import React from "react";
261
+ import { useAOS } from "aos/react";
244
262
 
245
263
  function MyComponent() {
246
264
  useAOS({
247
265
  duration: 1000,
248
- once: true
266
+ once: true,
249
267
  });
250
268
 
251
- return (
252
- <div data-aos="fade-up">
253
- Animate me!
254
- </div>
255
- );
269
+ return <div data-aos="fade-up">Animate me!</div>;
256
270
  }
257
271
  ```
258
272
 
@@ -261,19 +275,19 @@ function MyComponent() {
261
275
  We support both Vue 2 and Vue 3 using a unified Vue Plugin and a custom directive `v-aos`.
262
276
 
263
277
  ```javascript
264
- import { createApp } from 'vue';
265
- import { AOSPlugin } from 'aos/vue';
266
- import App from './App.vue';
278
+ import { createApp } from "vue";
279
+ import { AOSPlugin } from "aos/vue";
280
+ import App from "./App.vue";
267
281
 
268
282
  const app = createApp(App);
269
283
 
270
284
  // Register AOS Plugin
271
285
  app.use(AOSPlugin, {
272
286
  duration: 800,
273
- once: false
287
+ once: false,
274
288
  });
275
289
 
276
- app.mount('#app');
290
+ app.mount("#app");
277
291
  ```
278
292
 
279
293
  Then use the `v-aos` directive in your components:
@@ -289,112 +303,110 @@ Then use the `v-aos` directive in your components:
289
303
  <div v-aos="{ animation: 'zoom-in', delay: 200, duration: 600 }"></div>
290
304
  ```
291
305
 
292
-
293
306
  ### 👻 Animations
294
307
 
295
308
  There are serveral predefined animations you can use already:
296
309
 
297
- * Fade animations:
298
- * fade
299
- * fade-up
300
- * fade-down
301
- * fade-left
302
- * fade-right
303
- * fade-up-right
304
- * fade-up-left
305
- * fade-down-right
306
- * fade-down-left
307
-
308
- * Flip animations:
309
- * flip-up
310
- * flip-down
311
- * flip-left
312
- * flip-right
313
-
314
- * Slide animations:
315
- * slide-up
316
- * slide-down
317
- * slide-left
318
- * slide-right
319
-
320
- * Zoom animations:
321
- * zoom-in
322
- * zoom-in-up
323
- * zoom-in-down
324
- * zoom-in-left
325
- * zoom-in-right
326
- * zoom-out
327
- * zoom-out-up
328
- * zoom-out-down
329
- * zoom-out-left
330
- * zoom-out-right
331
-
332
- * Blur animations:
333
- * blur-in
334
- * blur-in-up
335
- * blur-in-down
336
- * blur-in-left
337
- * blur-in-right
338
-
339
- * Skew animations:
340
- * skew-up
341
- * skew-down
342
-
343
- * Rotate animations:
344
- * rotate-in
345
- * rotate-in-up-left
346
- * rotate-in-up-right
347
- * rotate-in-down-left
348
- * rotate-in-down-right
349
-
350
- * Back animations:
351
- * back-in
352
- * back-in-up
353
- * back-in-down
354
- * back-in-left
355
- * back-in-right
356
-
357
- * Specials:
358
- * roll-in
359
- * jack-in-the-box
310
+ - Fade animations:
311
+ - fade
312
+ - fade-up
313
+ - fade-down
314
+ - fade-left
315
+ - fade-right
316
+ - fade-up-right
317
+ - fade-up-left
318
+ - fade-down-right
319
+ - fade-down-left
320
+
321
+ - Flip animations:
322
+ - flip-up
323
+ - flip-down
324
+ - flip-left
325
+ - flip-right
326
+
327
+ - Slide animations:
328
+ - slide-up
329
+ - slide-down
330
+ - slide-left
331
+ - slide-right
332
+
333
+ - Zoom animations:
334
+ - zoom-in
335
+ - zoom-in-up
336
+ - zoom-in-down
337
+ - zoom-in-left
338
+ - zoom-in-right
339
+ - zoom-out
340
+ - zoom-out-up
341
+ - zoom-out-down
342
+ - zoom-out-left
343
+ - zoom-out-right
344
+
345
+ - Blur animations:
346
+ - blur-in
347
+ - blur-in-up
348
+ - blur-in-down
349
+ - blur-in-left
350
+ - blur-in-right
351
+
352
+ - Skew animations:
353
+ - skew-up
354
+ - skew-down
355
+
356
+ - Rotate animations:
357
+ - rotate-in
358
+ - rotate-in-up-left
359
+ - rotate-in-up-right
360
+ - rotate-in-down-left
361
+ - rotate-in-down-right
362
+
363
+ - Back animations:
364
+ - back-in
365
+ - back-in-up
366
+ - back-in-down
367
+ - back-in-left
368
+ - back-in-right
369
+
370
+ - Specials:
371
+ - roll-in
372
+ - jack-in-the-box
360
373
 
361
374
  ### Anchor placement:
362
375
 
363
- * top-bottom
364
- * top-center
365
- * top-top
366
- * center-bottom
367
- * center-center
368
- * center-top
369
- * bottom-bottom
370
- * bottom-center
371
- * bottom-top
372
-
376
+ - top-bottom
377
+ - top-center
378
+ - top-top
379
+ - center-bottom
380
+ - center-center
381
+ - center-top
382
+ - bottom-bottom
383
+ - bottom-center
384
+ - bottom-top
373
385
 
374
386
  ### Easing functions:
375
387
 
376
388
  You can choose one of these timing function to animate elements nicely:
377
389
 
378
- * linear
379
- * ease
380
- * ease-in
381
- * ease-out
382
- * ease-in-out
383
- * ease-in-back
384
- * ease-out-back
385
- * ease-in-out-back
386
- * ease-in-sine
387
- * ease-out-sine
388
- * ease-in-out-sine
389
- * ease-in-quad
390
- * ease-out-quad
391
- * ease-in-out-quad
392
- * ease-in-cubic
393
- * ease-out-cubic
394
- * ease-in-out-cubic
395
- * ease-in-quart
396
- * ease-out-quart
397
- * ease-in-out-quart
390
+ - linear
391
+ - ease
392
+ - ease-in
393
+ - ease-out
394
+ - ease-in-out
395
+ - ease-in-back
396
+ - ease-out-back
397
+ - ease-in-out-back
398
+ - ease-in-sine
399
+ - ease-out-sine
400
+ - ease-in-out-sine
401
+ - ease-in-quad
402
+ - ease-out-quad
403
+ - ease-in-out-quad
404
+ - ease-in-cubic
405
+ - ease-out-cubic
406
+ - ease-in-out-cubic
407
+ - ease-in-quart
408
+ - ease-out-quart
409
+ - ease-in-out-quart
398
410
 
399
411
  ## ✌️ [Contributing](CONTRIBUTING.md)
400
412
 
package/README.zh-CN.md CHANGED
@@ -1,9 +1,15 @@
1
+ # AOS Modern
2
+
3
+ [English](./README.md) | [简体中文](./README.zh-CN.md)
4
+
5
+ ---
6
+
1
7
  # AOS - 页面滚动动画库 (Animate on Scroll)
2
8
 
3
- [![AOS - Animate on scroll library](https://s32.postimg.org/ktvt59hol/aos_header.png)](https://gabulaideu.github.io/aos/)
9
+ [![AOS - Animate on scroll library](https://gabulaideu.github.io/aos/logo.svg)](https://gabulaideu.github.io/aos/)
4
10
 
5
- [![NPM version](https://img.shields.io/npm/v/aos-modern.svg?style=flat)](https://npmjs.org/package/aos-modern)
6
- [![NPM downloads](https://img.shields.io/npm/dm/aos-modern.svg?style=flat)](https://npmjs.org/package/aos-modern)
11
+ [![NPM version](https://img.shields.io/npm/v/aos-modern.svg?style=flat)](https://www.npmjs.com/package/aos-modern)
12
+ [![NPM downloads](https://img.shields.io/npm/dm/aos-modern.svg?style=flat)](https://www.npmjs.com/package/aos-modern)
7
13
 
8
14
  一个用于在页面滚动时为元素添加动画的超轻量库。
9
15
 
@@ -18,15 +24,10 @@ AOS 支持在向下和向上滚动时，为元素应用动画。
18
24
 
19
25
  ### 🚀 [在线 Demo](https://gabulaideu.github.io/aos/)
20
26
 
21
- ### 🌟 Codepen 在线示例
22
- - [不同内置动画演示](http://codepen.io/michalsnik/pen/WxNdvq)
23
- - [使用自定义锚点设置 (data-aos-anchor)](http://codepen.io/michalsnik/pen/jrOYVO)
24
- - [使用不同的触发位置和缓动效果](http://codepen.io/michalsnik/pen/EyxoNm)
25
- - [简单的自定义动画](http://codepen.io/michalsnik/pen/WxvNvE)
26
-
27
27
  ---
28
28
 
29
29
  ## ❗ 注意事项
30
+
30
31
  从 `2.0.0` 版本开始，原先的 `aos` 属性已被废弃，请务必使用标准 HTML5 的 `data-aos`。
31
32
 
32
33
  ## ⚙ 安装与设置
@@ -35,35 +36,44 @@ AOS 支持在向下和向上滚动时，为元素应用动画。
35
36
 
36
37
  - 使用 `npm` 或 `yarn`
37
38
 
38
- ```bash
39
- npm install aos-modern --save
40
- # 或者
41
- yarn add aos-modern
42
- ```
39
+ ```bash
40
+ npm install aos-modern --save
41
+ # 或者
42
+ yarn add aos-modern
43
+ ```
43
44
 
44
45
  - 直接下载压缩包 -> [点击下载](https://github.com/gabulaideu/aos/archive/master.zip)
45
46
 
46
-
47
47
  ### 引入样式表
48
48
 
49
- ```html
49
+ - **CDN**:
50
+ ```html
51
+ <link rel="stylesheet" href="https://unpkg.com/aos-modern@latest/dist/aos.css" />
52
+ ```
53
+ - **本地引入 (node_modules)**:
54
+ ```html
50
55
  <link rel="stylesheet" href="node_modules/aos-modern/dist/aos.css" />
51
- ```
56
+ ```
52
57
 
53
58
  ### 引入脚本
54
59
 
55
- ```html
60
+ - **CDN**:
61
+ ```html
62
+ <script src="https://unpkg.com/aos-modern@latest/dist/aos.js"></script>
63
+ ```
64
+ - **本地引入 (node_modules)**:
65
+ ```html
56
66
  <script src="node_modules/aos-modern/dist/aos.js"></script>
57
- ```
67
+ ```
58
68
 
59
69
  AOS 兼容 UMD 模块规范，因此您可以通过 AMD、CommonJS 模块导入，或以全局变量、Node 模块以及 ES6 模块的形式进行使用。
60
70
 
61
71
  ### 初始化 AOS
62
72
 
63
73
  ```html
64
- <script>
65
- AOS.init();
66
- </script>
74
+ <script>
75
+ AOS.init();
76
+ </script>
67
77
  ```
68
78
 
69
79
  ## 🤔 如何使用？
@@ -73,7 +83,7 @@ AOS 兼容 UMD 模块规范，因此您可以通过 AMD、CommonJS 模块导入
73
83
  只需在 HTML 元素上添加 `data-aos` 属性即可：
74
84
 
75
85
  ```html
76
- <div data-aos="动画名称">
86
+ <div data-aos="动画名称"></div>
77
87
  ```
78
88
 
79
89
  当您滚动到该元素时，脚本就会自动触发该元素的“动画名称”动画。
@@ -84,24 +94,25 @@ AOS 兼容 UMD 模块规范，因此您可以通过 AMD、CommonJS 模块导入
84
94
 
85
95
  这些属性可以单独配置在特定元素上，也可以在初始化脚本时配置在全局默认对象中（在配置项对象中不需要加上 `data-` 前缀）。
86
96
 
87
- | 属性 | 说明 | 示例值 | 默认值 |
88
- |---------------------------|-------------|---------------|---------|
89
- | *`data-aos-offset`* | 更改动画触发的偏移量，单位像素 (px) | 200 | 120 |
90
- | *`data-aos-duration`* | 动画的持续时间，单位毫秒 (ms) | 600 | 400 |
91
- | *`data-aos-easing`* | 选择不同的 CSS3 缓动函数 | ease-in-sine | ease |
92
- | *`data-aos-delay`* | 延迟触发动画的时间，单位毫秒 (ms) | 300 | 0 |
93
- | *`data-aos-anchor`* | 锚点元素。指定另一个元素的偏移来触发当前元素的动画，而不是使用自身偏移 | #selector | null |
94
- | *`data-aos-anchor-placement`* | 锚点位置。指定当元素在屏幕什么位置时触发动画 | top-center | top-bottom |
95
- | *`data-aos-once`* | 动画是否仅触发一次，还是在每次滚动页面时重复触发 | true | false |
97
+ | 属性 | 说明 | 示例值 | 默认值 |
98
+ | ----------------------------- | ---------------------------------------------------------------------- | ------------ | ---------- |
99
+ | _`data-aos-offset`_ | 更改动画触发的偏移量，单位像素 (px) | 200 | 120 |
100
+ | _`data-aos-duration`_ | 动画的持续时间，单位毫秒 (ms) | 600 | 400 |
101
+ | _`data-aos-easing`_ | 选择不同的 CSS3 缓动函数 | ease-in-sine | ease |
102
+ | _`data-aos-delay`_ | 延迟触发动画的时间，单位毫秒 (ms) | 300 | 0 |
103
+ | _`data-aos-anchor`_ | 锚点元素。指定另一个元素的偏移来触发当前元素的动画，而不是使用自身偏移 | #selector | null |
104
+ | _`data-aos-anchor-placement`_ | 锚点位置。指定当元素在屏幕什么位置时触发动画 | top-center | top-bottom |
105
+ | _`data-aos-once`_ | 动画是否仅触发一次，还是在每次滚动页面时重复触发 | true | false |
96
106
 
97
- *`duration` 仅支持从 50 到 3000 的值，步长为 50ms。因为动画是由 CSS 控制的，为限制生成的 CSS 体积才做此范围约束。
107
+ \*`duration` 仅支持从 50 到 3000 的值，步长为 50ms。因为动画是由 CSS 控制的，为限制生成的 CSS 体积才做此范围约束。
98
108
 
99
109
  如果您需要更多时间档位，可以在页面中自定义 CSS，例如：
100
110
 
101
111
  ```css
102
- body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{
103
- transition-duration: 4000ms;
104
- }
112
+ body[data-aos-duration="4000"] [data-aos],
113
+ [data-aos][data-aos][data-aos-duration="4000"] {
114
+ transition-duration: 4000ms;
115
+ }
105
116
  ```
106
117
 
107
118
  这会在全局以及单体配置上增加 4000ms 的动画时间档位。
@@ -113,28 +124,39 @@ AOS 兼容 UMD 模块规范，因此您可以通过 AMD、CommonJS 模块导入
113
124
  #### 示例代码：
114
125
 
115
126
  ```html
116
- <div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">
127
+ <div
128
+ data-aos="fade-zoom-in"
129
+ data-aos-offset="200"
130
+ data-aos-easing="ease-in-sine"
131
+ data-aos-duration="600"
132
+ ></div>
117
133
  ```
134
+
118
135
  ```html
119
- <div data-aos="flip-left" data-aos-delay="100" data-aos-anchor=".example-selector">
136
+ <div
137
+ data-aos="flip-left"
138
+ data-aos-delay="100"
139
+ data-aos-anchor=".example-selector"
140
+ ></div>
120
141
  ```
142
+
121
143
  ```html
122
- <div data-aos="fade-up" data-aos-anchor-placement="top-center">
144
+ <div data-aos="fade-up" data-aos-anchor-placement="top-center"></div>
123
145
  ```
124
146
 
125
-
126
147
  #### API 接口
127
148
 
128
149
  AOS 作为一个全局变量暴露在 window 下，当前提供四个方法：
129
150
 
130
- * `init` - 初始化 AOS
131
- * `refresh` - 重新计算所有元素的偏移和位置（例如在窗口大小改变时）
132
- * `refreshHard` - 重新装载符合条件的 `data-aos` 元素并触发 `refresh`（在异步添加/移出 DOM 时调用）
133
- * `destroy` - 清理并解绑所有的滚动观察器、DOM 监听器以及事件监听（特别适用于 SPA 应用路由/生命周期销毁）
151
+ - `init` - 初始化 AOS
152
+ - `refresh` - 重新计算所有元素的偏移和位置（例如在窗口大小改变时）
153
+ - `refreshHard` - 重新装载符合条件的 `data-aos` 元素并触发 `refresh`（在异步添加/移出 DOM 时调用）
154
+ - `destroy` - 清理并解绑所有的滚动观察器、DOM 监听器以及事件监听（特别适用于 SPA 应用路由/生命周期销毁）
134
155
 
135
156
  使用方法示例：
157
+
136
158
  ```javascript
137
- AOS.refresh();
159
+ AOS.refresh();
138
160
  ```
139
161
 
140
162
  默认情况下，AOS 会使用 `MutationObserver` 自动侦测 DOM 的变动。如果有新元素异步加载或被移除，它会自动触发 `refreshHard()`。在不支持 `MutationObserver` 的旧浏览器中，您可能需要手动调用该方法。
@@ -160,19 +182,19 @@ AOS 作为一个全局变量暴露在 window 下，当前提供四个方法：
160
182
 
161
183
  以下选项只能在调用 `AOS.init({...})` 时传入配置对象中：
162
184
 
163
- | 选项名称 | 说明 | 示例值 | 默认值 |
164
- |---------------------------|-------------|---------------|---------|
165
- | *`disable`* | 禁用 AOS 的判定条件 | 'mobile' | false |
166
- | *`startEvent`* | 初始化 AOS 的文档事件名 | 'someEvent' | 'DOMContentLoaded' |
185
+ | 选项名称 | 说明 | 示例值 | 默认值 |
186
+ | -------------- | ----------------------- | ----------- | ------------------ |
187
+ | _`disable`_ | 禁用 AOS 的判定条件 | 'mobile' | false |
188
+ | _`startEvent`_ | 初始化 AOS 的文档事件名 | 'someEvent' | 'DOMContentLoaded' |
167
189
 
168
190
  ##### 禁用 AOS (disable)
169
191
 
170
192
  如果您希望在特定设备或条件下禁用动画，可以传入 `disable` 属性：
171
193
 
172
194
  ```javascript
173
- AOS.init({
174
- disable: 'mobile'
175
- });
195
+ AOS.init({
196
+ disable: "mobile",
197
+ });
176
198
  ```
177
199
 
178
200
  AOS 支持预设的三种设备名称：`mobile`（包含手机和平板）、`phone`（仅限手机）或 `tablet`（仅限平板）。
@@ -180,7 +202,7 @@ AOS 支持预设的三种设备名称：`mobile`（包含手机和平板）、`p
180
202
  此外，您还可以传入自定义判定式：
181
203
 
182
204
  ```javascript
183
- disable: window.innerWidth < 1024
205
+ disable: window.innerWidth < 1024;
184
206
  ```
185
207
 
186
208
  或者传入一个返回布尔值的 `function`：
@@ -197,17 +219,19 @@ AOS 支持预设的三种设备名称：`mobile`（包含手机和平板）、`p
197
219
  如果不希望在 `DOMContentLoaded` 时执行初始化，您可以设置自定义的事件，AOS 将在 `document` 上监听该事件：
198
220
 
199
221
  ```javascript
200
- AOS.init({
201
- startEvent: 'someCoolEvent'
202
- });
222
+ AOS.init({
223
+ startEvent: "someCoolEvent",
224
+ });
203
225
  ```
204
226
 
205
227
  **重要提示：** 若设置 `startEvent: 'load'`，监听器会被自动附加到 `window` 对象而不是 `document` 上。
228
+
206
229
  ### 🖥 本地演示 (Demo)
207
230
 
208
231
  AOS Modern 提供了针对核心库及各框架集成的本地 HTML 示例页面，演示了各种动画用法与生命周期特性。
209
232
 
210
233
  要本地运行 Demo：
234
+
211
235
  1. 克隆本项目仓库
212
236
  2. 安装依赖并启动本地开发服务器：
213
237
  ```bash
@@ -215,11 +239,11 @@ AOS Modern 提供了针对核心库及各框架集成的本地 HTML 示例页面
215
239
  yarn dev
216
240
  ```
217
241
  3. 在浏览器中打开以下链接：
218
- - **官方交互式演示门户**: [http://localhost:8080/](http://localhost:8080/)
219
- - **核心库静态示例**：[http://localhost:8080/simple.html](http://localhost:8080/simple.html)
220
- - **核心库异步 DOM 侦测**：[http://localhost:8080/async.html](http://localhost:8080/async.html)
221
- - **React 挂载/卸载 Hook 演示**：[http://localhost:8080/react.html](http://localhost:8080/react.html)
222
- - **Vue Plugin 与指令演示**：[http://localhost:8080/vue.html](http://localhost:8080/vue.html)
242
+ - **官方交互式演示门户**: [http://localhost:8080/](http://localhost:8080/)
243
+ - **核心库静态示例**：[http://localhost:8080/simple.html](http://localhost:8080/simple.html)
244
+ - **核心库异步 DOM 侦测**：[http://localhost:8080/async.html](http://localhost:8080/async.html)
245
+ - **React 挂载/卸载 Hook 演示**：[http://localhost:8080/react.html](http://localhost:8080/react.html)
246
+ - **Vue Plugin 与指令演示**：[http://localhost:8080/vue.html](http://localhost:8080/vue.html)
223
247
 
224
248
  ### 📦 框架集成支持
225
249
 
@@ -230,20 +254,16 @@ AOS 现原生提供对现代前端框架（React、Vue）的封装和导出支
230
254
  AOS 导出了自定义 React Hook `useAOS` 用于处理挂载初始化与卸载销毁逻辑。
231
255
 
232
256
  ```javascript
233
- import React from 'react';
234
- import { useAOS } from 'aos/react';
257
+ import React from "react";
258
+ import { useAOS } from "aos/react";
235
259
 
236
260
  function MyComponent() {
237
261
  useAOS({
238
262
  duration: 1000,
239
- once: true
263
+ once: true,
240
264
  });
241
265
 
242
- return (
243
- <div data-aos="fade-up">
244
- 动画呈现！
245
- </div>
246
- );
266
+ return <div data-aos="fade-up">动画呈现！</div>;
247
267
  }
248
268
  ```
249
269
 
@@ -254,19 +274,19 @@ function MyComponent() {
254
274
  在应用入口文件（如 `main.js`）中引入：
255
275
 
256
276
  ```javascript
257
- import { createApp } from 'vue';
258
- import { AOSPlugin } from 'aos/vue';
259
- import App from './App.vue';
277
+ import { createApp } from "vue";
278
+ import { AOSPlugin } from "aos/vue";
279
+ import App from "./App.vue";
260
280
 
261
281
  const app = createApp(App);
262
282
 
263
283
  // 注册插件并配置全局选项
264
284
  app.use(AOSPlugin, {
265
285
  duration: 800,
266
- once: false
286
+ once: false,
267
287
  });
268
288
 
269
- app.mount('#app');
289
+ app.mount("#app");
270
290
  ```
271
291
 
272
292
  在组件模板中使用 `v-aos` 指令：
@@ -282,112 +302,110 @@ app.mount('#app');
282
302
  <div v-aos="{ animation: 'zoom-in', delay: 200, duration: 600 }"></div>
283
303
  ```
284
304
 
285
-
286
305
  ### 👻 预设动画列表
287
306
 
288
307
  您可以使用以下内置的动画样式：
289
308
 
290
- * 渐变 (Fade):
291
- * fade
292
- * fade-up
293
- * fade-down
294
- * fade-left
295
- * fade-right
296
- * fade-up-right
297
- * fade-up-left
298
- * fade-down-right
299
- * fade-down-left
300
-
301
- * 翻转 (Flip):
302
- * flip-up
303
- * flip-down
304
- * flip-left
305
- * flip-right
306
-
307
- * 滑动 (Slide):
308
- * slide-up
309
- * slide-down
310
- * slide-left
311
- * slide-right
312
-
313
- * 缩放 (Zoom):
314
- * zoom-in
315
- * zoom-in-up
316
- * zoom-in-down
317
- * zoom-in-left
318
- * zoom-in-right
319
- * zoom-out
320
- * zoom-out-up
321
- * zoom-out-down
322
- * zoom-out-left
323
- * zoom-out-right
324
-
325
- * 模糊渐入 (Blur):
326
- * blur-in
327
- * blur-in-up
328
- * blur-in-down
329
- * blur-in-left
330
- * blur-in-right
331
-
332
- * 倾斜滑入 (Skew):
333
- * skew-up
334
- * skew-down
335
-
336
- * 旋转滑入 (Rotate):
337
- * rotate-in
338
- * rotate-in-up-left
339
- * rotate-in-up-right
340
- * rotate-in-down-left
341
- * rotate-in-down-right
342
-
343
- * 回弹缩放 (Back):
344
- * back-in
345
- * back-in-up
346
- * back-in-down
347
- * back-in-left
348
- * back-in-right
349
-
350
- * 特技动效 (Specials):
351
- * roll-in
352
- * jack-in-the-box
309
+ - 渐变 (Fade):
310
+ - fade
311
+ - fade-up
312
+ - fade-down
313
+ - fade-left
314
+ - fade-right
315
+ - fade-up-right
316
+ - fade-up-left
317
+ - fade-down-right
318
+ - fade-down-left
319
+
320
+ - 翻转 (Flip):
321
+ - flip-up
322
+ - flip-down
323
+ - flip-left
324
+ - flip-right
325
+
326
+ - 滑动 (Slide):
327
+ - slide-up
328
+ - slide-down
329
+ - slide-left
330
+ - slide-right
331
+
332
+ - 缩放 (Zoom):
333
+ - zoom-in
334
+ - zoom-in-up
335
+ - zoom-in-down
336
+ - zoom-in-left
337
+ - zoom-in-right
338
+ - zoom-out
339
+ - zoom-out-up
340
+ - zoom-out-down
341
+ - zoom-out-left
342
+ - zoom-out-right
343
+
344
+ - 模糊渐入 (Blur):
345
+ - blur-in
346
+ - blur-in-up
347
+ - blur-in-down
348
+ - blur-in-left
349
+ - blur-in-right
350
+
351
+ - 倾斜滑入 (Skew):
352
+ - skew-up
353
+ - skew-down
354
+
355
+ - 旋转滑入 (Rotate):
356
+ - rotate-in
357
+ - rotate-in-up-left
358
+ - rotate-in-up-right
359
+ - rotate-in-down-left
360
+ - rotate-in-down-right
361
+
362
+ - 回弹缩放 (Back):
363
+ - back-in
364
+ - back-in-up
365
+ - back-in-down
366
+ - back-in-left
367
+ - back-in-right
368
+
369
+ - 特技动效 (Specials):
370
+ - roll-in
371
+ - jack-in-the-box
353
372
 
354
373
  ### 锚点对齐方式 (Anchor placement)
355
374
 
356
- * top-bottom
357
- * top-center
358
- * top-top
359
- * center-bottom
360
- * center-center
361
- * center-top
362
- * bottom-bottom
363
- * bottom-center
364
- * bottom-top
365
-
375
+ - top-bottom
376
+ - top-center
377
+ - top-top
378
+ - center-bottom
379
+ - center-center
380
+ - center-top
381
+ - bottom-bottom
382
+ - bottom-center
383
+ - bottom-top
366
384
 
367
385
  ### 缓动函数 (Easing functions)
368
386
 
369
387
  您可以选择不同的运动缓动曲线：
370
388
 
371
- * linear
372
- * ease
373
- * ease-in
374
- * ease-out
375
- * ease-in-out
376
- * ease-in-back
377
- * ease-out-back
378
- * ease-in-out-back
379
- * ease-in-sine
380
- * ease-out-sine
381
- * ease-in-out-sine
382
- * ease-in-quad
383
- * ease-out-quad
384
- * ease-in-out-quad
385
- * ease-in-cubic
386
- * ease-out-cubic
387
- * ease-in-out-cubic
388
- * ease-in-quart
389
- * ease-out-quart
390
- * ease-in-out-quart
389
+ - linear
390
+ - ease
391
+ - ease-in
392
+ - ease-out
393
+ - ease-in-out
394
+ - ease-in-back
395
+ - ease-out-back
396
+ - ease-in-out-back
397
+ - ease-in-sine
398
+ - ease-out-sine
399
+ - ease-in-out-sine
400
+ - ease-in-quad
401
+ - ease-out-quad
402
+ - ease-in-out-quad
403
+ - ease-in-cubic
404
+ - ease-out-cubic
405
+ - ease-in-out-cubic
406
+ - ease-in-quart
407
+ - ease-out-quart
408
+ - ease-in-out-quart
391
409
 
392
410
  ## ✌️ [Contributing](CONTRIBUTING.md)
393
411
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aos-modern",
3
- "version": "3.0.0",
3
+ "version": "3.0.1",
4
4
  "description": "Animate on scroll library using modern browser APIs",
5
5
  "homepage": "https://gabulaideu.github.io/aos/",
6
6
  "author": "galun <gabulaideu@gmail.com>",