@reimujs/aos 0.0.2 → 0.1.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.
- package/README.md +86 -22
- package/dist/aos.cjs.js +19 -78
- package/dist/aos.esm.js +19 -78
- package/dist/aos.umd.js +1 -1
- package/dist/index.d.ts +13 -2
- package/dist/utils.d.ts +2 -0
- package/package.json +6 -7
package/README.md
CHANGED
|
@@ -22,12 +22,43 @@ or
|
|
|
22
22
|
<script src="https://cdn.jsdelivr.net/npm/@reimujs/aos/dist/aos.umd.js"></script>
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
+
## Difference
|
|
26
|
+
|
|
27
|
+
So what's the difference between aos and @reimujs/aos?
|
|
28
|
+
|
|
29
|
+
- Typescript friendly
|
|
30
|
+
- Smaller package size (from 14.7KB + 26.1KB to 6.5KB + 25.2KB)
|
|
31
|
+
- Only support modern browsers
|
|
32
|
+
- Support additional settings
|
|
33
|
+
- Support additional API
|
|
34
|
+
|
|
35
|
+
### Additional settings
|
|
36
|
+
|
|
37
|
+
#### container
|
|
38
|
+
|
|
39
|
+
merge from [aos#223](https://github.com/michalsnik/aos/issues/223), you can set the container of AOS, accepts CSS Selector (e.g. ".my-awesome-container") or HTMLElement.
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
container: window, // AOS Container, accepts CSS Selector (e.g. ".my-awesome-container") or HTMLElement
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Additional API
|
|
46
|
+
|
|
47
|
+
#### AOS.destroy()
|
|
48
|
+
|
|
49
|
+
```typescript
|
|
50
|
+
function destroy(): void;
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Remove all event listeners and disconnect MutationObserver.
|
|
54
|
+
|
|
25
55
|
## Usage
|
|
26
56
|
|
|
27
57
|
Just same as aos@next. For more information, please visit [aos-how-to-use-it](https://github.com/michalsnik/aos?tab=readme-ov-file#-how-to-use-it).
|
|
28
58
|
|
|
29
59
|
```typescript
|
|
30
60
|
import AOS from "@reimujs/aos";
|
|
61
|
+
import "@reimujs/aos/dist/aos.css";
|
|
31
62
|
|
|
32
63
|
AOS.init({
|
|
33
64
|
// Global settings:
|
|
@@ -54,37 +85,70 @@ AOS.init({
|
|
|
54
85
|
});
|
|
55
86
|
```
|
|
56
87
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
So what's the difference between aos and @reimujs/aos?
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
- Typescript friendly
|
|
63
|
-
- Smaller package size (from 14.7KB + 26.1KB to 6.9KB + 25.2KB)
|
|
64
|
-
- Only support modern browsers
|
|
65
|
-
- Support additional settings
|
|
66
|
-
- Support additional API
|
|
67
|
-
|
|
68
|
-
### Additional settings
|
|
69
|
-
|
|
70
|
-
#### container
|
|
71
|
-
|
|
72
|
-
merge from [aos#223](https://github.com/michalsnik/aos/issues/223), you can set the container of AOS, accepts CSS Selector (e.g. ".my-awesome-container") or HTMLElement.
|
|
88
|
+
### Next.js
|
|
73
89
|
|
|
74
90
|
```typescript
|
|
75
|
-
|
|
91
|
+
"use client";
|
|
92
|
+
import { useEffect } from "react";
|
|
93
|
+
import "@reimujs/aos/dist/aos.css";
|
|
94
|
+
|
|
95
|
+
export default function Page() {
|
|
96
|
+
useEffect(() => {
|
|
97
|
+
import("@reimujs/aos").then(({ default: AOS }) => {
|
|
98
|
+
AOS.init();
|
|
99
|
+
});
|
|
100
|
+
}, []);
|
|
101
|
+
}
|
|
76
102
|
```
|
|
77
103
|
|
|
78
|
-
###
|
|
104
|
+
### Nuxt
|
|
79
105
|
|
|
80
|
-
|
|
106
|
+
```html
|
|
107
|
+
<script lang="ts" setup>
|
|
108
|
+
import { onMounted } from "vue";
|
|
109
|
+
import "@reimujs/aos/dist/aos.css";
|
|
110
|
+
|
|
111
|
+
onMounted(() => {
|
|
112
|
+
import("@reimujs/aos").then(({ default: AOS }) => {
|
|
113
|
+
AOS.init();
|
|
114
|
+
});
|
|
115
|
+
});
|
|
116
|
+
</script>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Augular
|
|
81
120
|
|
|
82
121
|
```typescript
|
|
83
|
-
|
|
122
|
+
import { Component, Inject, PLATFORM_ID } from '@angular/core';
|
|
123
|
+
import { isPlatformBrowser } from '@angular/common';
|
|
124
|
+
import '@reimujs/aos/dist/aos.css';
|
|
125
|
+
|
|
126
|
+
@Component({})
|
|
127
|
+
export class AppComponent {
|
|
128
|
+
constructor(
|
|
129
|
+
@Inject(PLATFORM_ID) private platformId: Object
|
|
130
|
+
) {
|
|
131
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
132
|
+
import("@reimujs/aos").then(({ default: AOS }) => {
|
|
133
|
+
AOS.init();
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
84
138
|
```
|
|
85
139
|
|
|
86
|
-
|
|
140
|
+
### Astro
|
|
87
141
|
|
|
142
|
+
```html
|
|
143
|
+
---
|
|
144
|
+
import "@reimujs/aos/dist/aos.css";
|
|
145
|
+
---
|
|
146
|
+
<script>
|
|
147
|
+
import AOS from "@reimujs/aos";
|
|
148
|
+
AOS.init();
|
|
149
|
+
</script>
|
|
150
|
+
```
|
|
88
151
|
|
|
89
152
|
## License
|
|
90
|
-
|
|
153
|
+
|
|
154
|
+
MIT
|
package/dist/aos.cjs.js
CHANGED
|
@@ -1,95 +1,36 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
function debounce(func,
|
|
4
|
-
let
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const trailing = edges == null || edges.includes('trailing');
|
|
8
|
-
const invoke = () => {
|
|
9
|
-
if (pendingArgs !== null) {
|
|
10
|
-
func.apply(pendingThis, pendingArgs);
|
|
11
|
-
pendingThis = undefined;
|
|
12
|
-
pendingArgs = null;
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
const onTimerEnd = () => {
|
|
16
|
-
if (trailing) {
|
|
17
|
-
invoke();
|
|
18
|
-
}
|
|
19
|
-
cancel();
|
|
20
|
-
};
|
|
21
|
-
let timeoutId = null;
|
|
22
|
-
const schedule = () => {
|
|
23
|
-
if (timeoutId != null) {
|
|
24
|
-
clearTimeout(timeoutId);
|
|
25
|
-
}
|
|
3
|
+
function debounce(func, delay) {
|
|
4
|
+
let timeoutId;
|
|
5
|
+
return (...args) => {
|
|
6
|
+
clearTimeout(timeoutId);
|
|
26
7
|
timeoutId = setTimeout(() => {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}, debounceMs);
|
|
30
|
-
};
|
|
31
|
-
const cancelTimer = () => {
|
|
32
|
-
if (timeoutId !== null) {
|
|
33
|
-
clearTimeout(timeoutId);
|
|
34
|
-
timeoutId = null;
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
const cancel = () => {
|
|
38
|
-
cancelTimer();
|
|
39
|
-
pendingThis = undefined;
|
|
40
|
-
pendingArgs = null;
|
|
8
|
+
func.apply(this, args);
|
|
9
|
+
}, delay);
|
|
41
10
|
};
|
|
42
|
-
const flush = () => {
|
|
43
|
-
cancelTimer();
|
|
44
|
-
invoke();
|
|
45
|
-
};
|
|
46
|
-
const debounced = function (...args) {
|
|
47
|
-
if (signal?.aborted) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
pendingThis = this;
|
|
51
|
-
pendingArgs = args;
|
|
52
|
-
const isFirstCall = timeoutId == null;
|
|
53
|
-
schedule();
|
|
54
|
-
if (leading && isFirstCall) {
|
|
55
|
-
invoke();
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
debounced.schedule = schedule;
|
|
59
|
-
debounced.cancel = cancel;
|
|
60
|
-
debounced.flush = flush;
|
|
61
|
-
signal?.addEventListener('abort', cancel, { once: true });
|
|
62
|
-
return debounced;
|
|
63
11
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
12
|
+
function throttle(func, limit) {
|
|
13
|
+
let lastFunc, lastRan;
|
|
14
|
+
return (...args) => {
|
|
15
|
+
const context = this;
|
|
16
|
+
if (!lastRan || Date.now() - lastRan >= limit) {
|
|
17
|
+
func.apply(context, args);
|
|
18
|
+
lastRan = Date.now();
|
|
71
19
|
}
|
|
72
20
|
else {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}
|
|
21
|
+
clearTimeout(lastFunc);
|
|
22
|
+
lastFunc = setTimeout(() => {
|
|
23
|
+
func.apply(context, args);
|
|
24
|
+
lastRan = Date.now();
|
|
25
|
+
}, limit - (Date.now() - lastRan));
|
|
78
26
|
}
|
|
79
|
-
debounced(...args);
|
|
80
27
|
};
|
|
81
|
-
throttled.cancel = debounced.cancel;
|
|
82
|
-
throttled.flush = debounced.flush;
|
|
83
|
-
return throttled;
|
|
84
28
|
}
|
|
85
29
|
|
|
86
30
|
const phoneRe = /iphone|ipod|android.*mobile|windows phone|blackberry|opera mini|mobile|phone/i;
|
|
87
31
|
const tabletRe = /ipad|android(?!.*mobile)|tablet|kindle/i;
|
|
88
|
-
function ua() {
|
|
89
|
-
return navigator.userAgent;
|
|
90
|
-
}
|
|
91
32
|
class Detector {
|
|
92
|
-
userAgent =
|
|
33
|
+
userAgent = navigator.userAgent;
|
|
93
34
|
phone() {
|
|
94
35
|
return phoneRe.test(this.userAgent);
|
|
95
36
|
}
|
package/dist/aos.esm.js
CHANGED
|
@@ -1,93 +1,34 @@
|
|
|
1
|
-
function debounce(func,
|
|
2
|
-
let
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const trailing = edges == null || edges.includes('trailing');
|
|
6
|
-
const invoke = () => {
|
|
7
|
-
if (pendingArgs !== null) {
|
|
8
|
-
func.apply(pendingThis, pendingArgs);
|
|
9
|
-
pendingThis = undefined;
|
|
10
|
-
pendingArgs = null;
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
const onTimerEnd = () => {
|
|
14
|
-
if (trailing) {
|
|
15
|
-
invoke();
|
|
16
|
-
}
|
|
17
|
-
cancel();
|
|
18
|
-
};
|
|
19
|
-
let timeoutId = null;
|
|
20
|
-
const schedule = () => {
|
|
21
|
-
if (timeoutId != null) {
|
|
22
|
-
clearTimeout(timeoutId);
|
|
23
|
-
}
|
|
1
|
+
function debounce(func, delay) {
|
|
2
|
+
let timeoutId;
|
|
3
|
+
return (...args) => {
|
|
4
|
+
clearTimeout(timeoutId);
|
|
24
5
|
timeoutId = setTimeout(() => {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}, debounceMs);
|
|
28
|
-
};
|
|
29
|
-
const cancelTimer = () => {
|
|
30
|
-
if (timeoutId !== null) {
|
|
31
|
-
clearTimeout(timeoutId);
|
|
32
|
-
timeoutId = null;
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
const cancel = () => {
|
|
36
|
-
cancelTimer();
|
|
37
|
-
pendingThis = undefined;
|
|
38
|
-
pendingArgs = null;
|
|
6
|
+
func.apply(this, args);
|
|
7
|
+
}, delay);
|
|
39
8
|
};
|
|
40
|
-
const flush = () => {
|
|
41
|
-
cancelTimer();
|
|
42
|
-
invoke();
|
|
43
|
-
};
|
|
44
|
-
const debounced = function (...args) {
|
|
45
|
-
if (signal?.aborted) {
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
pendingThis = this;
|
|
49
|
-
pendingArgs = args;
|
|
50
|
-
const isFirstCall = timeoutId == null;
|
|
51
|
-
schedule();
|
|
52
|
-
if (leading && isFirstCall) {
|
|
53
|
-
invoke();
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
debounced.schedule = schedule;
|
|
57
|
-
debounced.cancel = cancel;
|
|
58
|
-
debounced.flush = flush;
|
|
59
|
-
signal?.addEventListener('abort', cancel, { once: true });
|
|
60
|
-
return debounced;
|
|
61
9
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
10
|
+
function throttle(func, limit) {
|
|
11
|
+
let lastFunc, lastRan;
|
|
12
|
+
return (...args) => {
|
|
13
|
+
const context = this;
|
|
14
|
+
if (!lastRan || Date.now() - lastRan >= limit) {
|
|
15
|
+
func.apply(context, args);
|
|
16
|
+
lastRan = Date.now();
|
|
69
17
|
}
|
|
70
18
|
else {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
19
|
+
clearTimeout(lastFunc);
|
|
20
|
+
lastFunc = setTimeout(() => {
|
|
21
|
+
func.apply(context, args);
|
|
22
|
+
lastRan = Date.now();
|
|
23
|
+
}, limit - (Date.now() - lastRan));
|
|
76
24
|
}
|
|
77
|
-
debounced(...args);
|
|
78
25
|
};
|
|
79
|
-
throttled.cancel = debounced.cancel;
|
|
80
|
-
throttled.flush = debounced.flush;
|
|
81
|
-
return throttled;
|
|
82
26
|
}
|
|
83
27
|
|
|
84
28
|
const phoneRe = /iphone|ipod|android.*mobile|windows phone|blackberry|opera mini|mobile|phone/i;
|
|
85
29
|
const tabletRe = /ipad|android(?!.*mobile)|tablet|kindle/i;
|
|
86
|
-
function ua() {
|
|
87
|
-
return navigator.userAgent;
|
|
88
|
-
}
|
|
89
30
|
class Detector {
|
|
90
|
-
userAgent =
|
|
31
|
+
userAgent = navigator.userAgent;
|
|
91
32
|
phone() {
|
|
92
33
|
return phoneRe.test(this.userAgent);
|
|
93
34
|
}
|
package/dist/aos.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).AOS=t()}(this,(function(){"use strict";
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).AOS=t()}(this,(function(){"use strict";const e=/iphone|ipod|android.*mobile|windows phone|blackberry|opera mini|mobile|phone/i,t=/ipad|android(?!.*mobile)|tablet|kindle/i;var s=new class{userAgent=navigator.userAgent;phone(){return e.test(this.userAgent)}mobile(){return e.test(this.userAgent)||t.test(this.userAgent)}tablet(){return t.test(this.userAgent)}};const n=(e,t)=>document.dispatchEvent(new CustomEvent(e,{detail:t})),i=(e,t)=>{if(e.animated===t)return;const{options:s,node:i}=e,o=t?"aos:in":"aos:out",a=t?"add":"remove";((e,t,s="add")=>{t?.forEach((t=>e.classList[s](t)))})(i,s.animatedClassNames,a),n(o,i),s.id&&n(`${o}:${s.id}`,i),e.animated=t};var o=(e,t)=>{e.forEach((e=>((e,t)=>{const{options:s,position:n}=e;s.mirror&&t>=n.out&&!s.once?i(e,!1):t>=n.in?i(e,!0):e.animated&&!s.once&&i(e,!1)})(e,(e=>e===window?e.pageYOffset:e.scrollTop)(t))))},a=(e,t,s)=>{const n=e.getAttribute(`data-aos-${t}`);return"true"===n||"false"!==n&&(n||s)};const r=function(e,t){let s=0,n=0;for(;e;)s+=e.offsetLeft-("BODY"!=e.tagName?e.scrollLeft:0),n+=e.offsetTop-("BODY"!=e.tagName?e.scrollTop:0),e=e.offsetParent===t?null:e.offsetParent;return{top:n,left:s}},l=(e,t,s,n)=>{const i=(e=>e===window?e.innerHeight:e.clientHeight)(n),o=a(e,"anchor"),l=a(e,"anchor-placement"),d=Number(a(e,"offset",l?0:t)),c=l||s;let h=e;if(o){const e=(n===window?document:n).querySelector(o);e&&(h=e)}let m=r(h,n).top-i;switch(c){case"top-bottom":break;case"center-bottom":m+=h.offsetHeight/2;break;case"bottom-bottom":m+=h.offsetHeight;break;case"top-center":m+=i/2;break;case"center-center":m+=i/2+h.offsetHeight/2;break;case"bottom-center":m+=i/2+h.offsetHeight;break;case"top-top":m+=i;break;case"bottom-top":m+=i+h.offsetHeight;break;case"center-top":m+=i+h.offsetHeight/2}return m+d},d=(e,t,s)=>{const n=a(e,"anchor"),i=a(e,"offset",t);let o=e;if(n){const e=(s===window?document:s).querySelector(n);e&&(o=e)}return r(o,s).top+o.offsetHeight-i};const c=e=>[...e].some((e=>e.dataset?.aos||e.children&&c(e.children))),h={offset:120,delay:0,easing:"ease",duration:400,disable:!1,once:!1,mirror:!1,anchorPlacement:"top-bottom",startEvent:"DOMContentLoaded",animatedClassName:"aos-animate",initClassName:"aos-init",useClassNames:!1,disableMutationObserver:!1,throttleDelay:99,debounceDelay:50,container:window};class m{elements=[];initialized=!1;options=h;container=null;observer=null;scrollHandler=null;resizeHandler=null;startHandler=null;static getElements(e){return[...(e===window?document:e).querySelectorAll("[data-aos]")].map((e=>({node:e})))}static isDisabled(e){return!0===e||"mobile"===e&&s.mobile()||"phone"===e&&s.phone()||"tablet"===e&&s.tablet()||"function"==typeof e&&!0===e()}initializeScroll(){const{container:e}=this;return this.elements=function(e,t,s){return e.forEach((e=>{const{node:n}=e,i=a(n,"mirror",t.mirror),o=a(n,"once",t.once),r=a(n,"id"),c=t.useClassNames&&n.getAttribute("data-aos")?.split(" ")||[],h=[t.animatedClassName,...c].filter((e=>"string"==typeof e));t.initClassName&&n.classList.add(t.initClassName),e.position={in:l(n,t.offset,t.anchorPlacement,s),out:i&&d(n,t.offset,s)},e.options={once:o,mirror:i,animatedClassNames:h,id:r}})),e}(this.elements,this.options,e),o(this.elements,this.container),this.scrollHandler=function(e,t){let s,n;return(...i)=>{const o=this;!n||Date.now()-n>=t?(e.apply(o,i),n=Date.now()):(clearTimeout(s),s=setTimeout((()=>{e.apply(o,i),n=Date.now()}),t-(Date.now()-n)))}}((()=>{o(this.elements,e)}),this.options.throttleDelay),e.addEventListener("scroll",this.scrollHandler,{passive:!0}),this.elements}init(e={}){this.destroy(),this.options={...h,...e};const t=(e=>e instanceof Element||e===window?e:"string"==typeof e?document.querySelector(e):null)(this.options.container);if(!t)throw"AOS - cannot find the container element. The container option must be an HTMLElement or a CSS Selector.";if(this.elements=m.getElements(t),this.container=t,m.isDisabled(this.options.disable))return this.disable();this.options.disableMutationObserver||(this.observer=(e=>{const t=new MutationObserver((t=>{t?.some((({addedNodes:e,removedNodes:t})=>c([...e,...t])))&&e()}));return t.observe(document.documentElement,{childList:!0,subtree:!0}),t})(this.refreshHard.bind(this))),document.body.setAttribute("data-aos-easing",this.options.easing),document.body.setAttribute("data-aos-duration",this.options.duration),document.body.setAttribute("data-aos-delay",this.options.delay),this.startHandler={handler:this.refresh.bind(this),type:"document"},["DOMContentLoaded","load"].includes(this.options.startEvent)?(window.addEventListener("load",this.startHandler.handler),this.startHandler.type="window"):document.addEventListener(this.options.startEvent,this.startHandler.handler),"DOMContentLoaded"===this.options.startEvent&&["complete","interactive"].indexOf(document.readyState)>-1&&this.refresh(!0),this.resizeHandler=function(e,t){let s;return(...n)=>{clearTimeout(s),s=setTimeout((()=>{e.apply(this,n)}),t)}}(this.refresh.bind(this),this.options.debounceDelay),window.addEventListener("resize",this.resizeHandler),window.addEventListener("orientationchange",this.resizeHandler)}refresh(e=!1){e&&(this.initialized=!0),this.initialized&&this.initializeScroll()}refreshHard(){if(this.elements=m.getElements(this.container),m.isDisabled(this.options.disable))return this.disable();this.refresh()}disable(){this.elements.forEach((({node:e})=>{e.removeAttribute("data-aos"),e.removeAttribute("data-aos-easing"),e.removeAttribute("data-aos-duration"),e.removeAttribute("data-aos-delay"),this.options.initClassName&&e.classList.remove(this.options.initClassName),this.options.animatedClassName&&e.classList.remove(this.options.animatedClassName)}))}destroy(){if(this.observer?.disconnect(),this.observer=null,this.startHandler){const{handler:e,type:t}=this.startHandler;"document"===t?document.removeEventListener(this.options.startEvent,e):window.removeEventListener("load",e),this.startHandler=null}this.scrollHandler&&(window.removeEventListener("scroll",this.scrollHandler),this.scrollHandler=null),this.resizeHandler&&(window.removeEventListener("resize",this.resizeHandler),window.removeEventListener("orientationchange",this.resizeHandler),this.resizeHandler=null)}}return new m}));
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
|
+
type AosEventType = "aos:in" | "aos:out";
|
|
2
|
+
interface AosEvent extends Event {
|
|
3
|
+
detail: Element;
|
|
4
|
+
}
|
|
5
|
+
declare global {
|
|
6
|
+
interface Document {
|
|
7
|
+
addEventListener(type: AosEventType, listener: (event: AosEvent) => void, options?: boolean | AddEventListenerOptions): void;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
type easingOptions = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "ease-in-back" | "ease-out-back" | "ease-in-out-back" | "ease-in-sine" | "ease-out-sine" | "ease-in-out-sine" | "ease-in-quad" | "ease-out-quad" | "ease-in-out-quad" | "ease-in-cubic" | "ease-out-cubic" | "ease-in-out-cubic" | "ease-in-quart" | "ease-out-quart" | "ease-in-out-quart";
|
|
11
|
+
type anchorPlacementOptions = "top-bottom" | "top-center" | "top-top" | "center-bottom" | "center-center" | "center-top" | "bottom-bottom" | "bottom-center" | "bottom-top";
|
|
1
12
|
export interface Options {
|
|
2
13
|
offset: number;
|
|
3
14
|
delay: number;
|
|
4
|
-
easing:
|
|
15
|
+
easing: easingOptions;
|
|
5
16
|
duration: number;
|
|
6
17
|
disable: boolean | "mobile" | "phone" | "tablet" | (() => boolean);
|
|
7
18
|
once: boolean;
|
|
8
19
|
mirror: boolean;
|
|
9
|
-
anchorPlacement:
|
|
20
|
+
anchorPlacement: anchorPlacementOptions;
|
|
10
21
|
startEvent: string;
|
|
11
22
|
animatedClassName: string;
|
|
12
23
|
initClassName: string;
|
package/dist/utils.d.ts
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reimujs/aos",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"main": "dist/aos.cjs.js",
|
|
5
5
|
"module": "dist/aos.esm.js",
|
|
6
6
|
"browser": "dist/aos.umd.js",
|
|
@@ -14,13 +14,12 @@
|
|
|
14
14
|
"devDependencies": {
|
|
15
15
|
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
16
16
|
"@rollup/plugin-terser": "^0.4.4",
|
|
17
|
-
"@rollup/plugin-typescript": "^12.1.
|
|
18
|
-
"rollup": "^4.
|
|
17
|
+
"@rollup/plugin-typescript": "^12.1.2",
|
|
18
|
+
"rollup": "^4.32.1",
|
|
19
19
|
"rollup-plugin-scss": "^3.0.0",
|
|
20
|
-
"sass": "^1.
|
|
21
|
-
"tslib": "^2.
|
|
22
|
-
"typescript": "^5.
|
|
23
|
-
"es-toolkit": "^1.23.0"
|
|
20
|
+
"sass": "^1.83.4",
|
|
21
|
+
"tslib": "^2.8.1",
|
|
22
|
+
"typescript": "^5.7.3"
|
|
24
23
|
},
|
|
25
24
|
"repository": {
|
|
26
25
|
"type": "git",
|