taggedjs-animate-css 0.0.3 → 0.0.6
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/bundle.js +1 -142
- package/bundle.js.gz +0 -0
- package/bundle.js.map +1 -1
- package/bundle.js.map.gz +0 -0
- package/js/index.d.ts +7 -0
- package/js/index.js +2 -1
- package/js/index.js.map +1 -1
- package/package.json +2 -1
package/bundle.js
CHANGED
|
@@ -1,143 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/***/ "./ts/createFx.function.ts":
|
|
4
|
-
/*!*********************************!*\
|
|
5
|
-
!*** ./ts/createFx.function.ts ***!
|
|
6
|
-
\*********************************/
|
|
7
|
-
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
8
|
-
|
|
9
|
-
__webpack_require__.r(__webpack_exports__);
|
|
10
|
-
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
11
|
-
/* harmony export */ captureElementPosition: () => (/* binding */ captureElementPosition),
|
|
12
|
-
/* harmony export */ createFx: () => (/* binding */ createFx)
|
|
13
|
-
/* harmony export */ });
|
|
14
|
-
function createFx({ fxIn, fxOut, staggerBy = 300, }) {
|
|
15
|
-
return {
|
|
16
|
-
in: (input) => animateInit({ fxName: fxIn, staggerBy, ...input }),
|
|
17
|
-
out: (input) => animateDestroy({ fxName: fxOut, staggerBy, capturePosition: true, ...input }),
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
const animateInit = async ({ target, stagger, staggerBy, fxName = 'fadeInDown' }) => {
|
|
21
|
-
target.style.opacity = '0';
|
|
22
|
-
if (stagger) {
|
|
23
|
-
await wait(stagger * staggerBy);
|
|
24
|
-
}
|
|
25
|
-
target.style.opacity = '1';
|
|
26
|
-
target.classList.add('animate__animated', 'animate__' + fxName);
|
|
27
|
-
};
|
|
28
|
-
const animateDestroy = async ({ target, stagger, capturePosition = true, fxName = 'fadeOutUp', staggerBy }) => {
|
|
29
|
-
if (capturePosition) {
|
|
30
|
-
captureElementPosition(target);
|
|
31
|
-
}
|
|
32
|
-
if (stagger) {
|
|
33
|
-
await wait(stagger * staggerBy);
|
|
34
|
-
}
|
|
35
|
-
target.classList.add('animate__animated', 'animate__' + fxName);
|
|
36
|
-
await wait(1000); // don't allow remove from stage until animation completed
|
|
37
|
-
target.classList.remove('animate__animated', 'animate__' + fxName);
|
|
38
|
-
};
|
|
39
|
-
// absolute
|
|
40
|
-
function captureElementPosition(element) {
|
|
41
|
-
element.style.zIndex = element.style.zIndex || 1;
|
|
42
|
-
const toTop = element.offsetTop + 'px';
|
|
43
|
-
const toLeft = element.offsetLeft + 'px';
|
|
44
|
-
const toWidth = (element.clientWidth + (element.offsetWidth - element.clientWidth) + 1) + 'px';
|
|
45
|
-
const toHeight = (element.clientHeight + (element.offsetHeight - element.clientHeight) + 1) + 'px';
|
|
46
|
-
const fix = () => {
|
|
47
|
-
element.style.top = toTop;
|
|
48
|
-
element.style.left = toLeft;
|
|
49
|
-
element.style.width = toWidth;
|
|
50
|
-
element.style.height = toHeight;
|
|
51
|
-
element.style.position = 'absolute';
|
|
52
|
-
};
|
|
53
|
-
// element.style.position = 'fixed'
|
|
54
|
-
// allow other elements that are being removed to have a moment to figure out where they currently sit
|
|
55
|
-
setTimeout(fix, 0);
|
|
56
|
-
}
|
|
57
|
-
function wait(time) {
|
|
58
|
-
return new Promise((res) => {
|
|
59
|
-
setTimeout(res, time);
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
/***/ })
|
|
65
|
-
|
|
66
|
-
/******/ });
|
|
67
|
-
/************************************************************************/
|
|
68
|
-
/******/ // The module cache
|
|
69
|
-
/******/ var __webpack_module_cache__ = {};
|
|
70
|
-
/******/
|
|
71
|
-
/******/ // The require function
|
|
72
|
-
/******/ function __webpack_require__(moduleId) {
|
|
73
|
-
/******/ // Check if module is in cache
|
|
74
|
-
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
75
|
-
/******/ if (cachedModule !== undefined) {
|
|
76
|
-
/******/ return cachedModule.exports;
|
|
77
|
-
/******/ }
|
|
78
|
-
/******/ // Create a new module (and put it into the cache)
|
|
79
|
-
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
80
|
-
/******/ // no module.id needed
|
|
81
|
-
/******/ // no module.loaded needed
|
|
82
|
-
/******/ exports: {}
|
|
83
|
-
/******/ };
|
|
84
|
-
/******/
|
|
85
|
-
/******/ // Execute the module function
|
|
86
|
-
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
87
|
-
/******/
|
|
88
|
-
/******/ // Return the exports of the module
|
|
89
|
-
/******/ return module.exports;
|
|
90
|
-
/******/ }
|
|
91
|
-
/******/
|
|
92
|
-
/************************************************************************/
|
|
93
|
-
/******/ /* webpack/runtime/define property getters */
|
|
94
|
-
/******/ (() => {
|
|
95
|
-
/******/ // define getter functions for harmony exports
|
|
96
|
-
/******/ __webpack_require__.d = (exports, definition) => {
|
|
97
|
-
/******/ for(var key in definition) {
|
|
98
|
-
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
99
|
-
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
100
|
-
/******/ }
|
|
101
|
-
/******/ }
|
|
102
|
-
/******/ };
|
|
103
|
-
/******/ })();
|
|
104
|
-
/******/
|
|
105
|
-
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
106
|
-
/******/ (() => {
|
|
107
|
-
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
108
|
-
/******/ })();
|
|
109
|
-
/******/
|
|
110
|
-
/******/ /* webpack/runtime/make namespace object */
|
|
111
|
-
/******/ (() => {
|
|
112
|
-
/******/ // define __esModule on exports
|
|
113
|
-
/******/ __webpack_require__.r = (exports) => {
|
|
114
|
-
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
115
|
-
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
116
|
-
/******/ }
|
|
117
|
-
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
118
|
-
/******/ };
|
|
119
|
-
/******/ })();
|
|
120
|
-
/******/
|
|
121
|
-
/************************************************************************/
|
|
122
|
-
var __webpack_exports__ = {};
|
|
123
|
-
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
|
|
124
|
-
(() => {
|
|
125
|
-
/*!*********************!*\
|
|
126
|
-
!*** ./ts/index.ts ***!
|
|
127
|
-
\*********************/
|
|
128
|
-
__webpack_require__.r(__webpack_exports__);
|
|
129
|
-
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
130
|
-
/* harmony export */ fadeInDown: () => (/* binding */ fadeInDown),
|
|
131
|
-
/* harmony export */ fadeOutUp: () => (/* binding */ fadeOutUp)
|
|
132
|
-
/* harmony export */ });
|
|
133
|
-
/* harmony import */ var _createFx_function__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./createFx.function */ "./ts/createFx.function.ts");
|
|
134
|
-
|
|
135
|
-
const { in: fadeInDown, out: fadeOutUp } = (0,_createFx_function__WEBPACK_IMPORTED_MODULE_0__.createFx)({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp' });
|
|
136
|
-
|
|
137
|
-
})();
|
|
138
|
-
|
|
139
|
-
var __webpack_exports__fadeInDown = __webpack_exports__.fadeInDown;
|
|
140
|
-
var __webpack_exports__fadeOutUp = __webpack_exports__.fadeOutUp;
|
|
141
|
-
export { __webpack_exports__fadeInDown as fadeInDown, __webpack_exports__fadeOutUp as fadeOutUp };
|
|
142
|
-
|
|
1
|
+
var t={d:(e,a)=>{for(var n in a)t.o(a,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:a[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function a({fxIn:t,fxOut:e,staggerBy:a=300}){return{in:e=>n({fxName:t,staggerBy:a,...e}),out:t=>i({fxName:e,staggerBy:a,capturePosition:!0,...t})}}t.d(e,{qG:()=>r,Ce:()=>o,Xn:()=>d,MV:()=>f});const n=async({target:t,stagger:e,staggerBy:a,fxName:n="fadeInDown"})=>{t.style.opacity="0",e&&await s(e*a),t.style.opacity="1",t.classList.add("animate__animated","animate__"+n)},i=async({target:t,stagger:e,capturePosition:a=!0,fxName:n="fadeOutUp",staggerBy:i})=>{a&&function(t){t.style.zIndex=t.style.zIndex||1;const e=t.offsetTop+"px",a=t.offsetLeft+"px",n=t.clientWidth+(t.offsetWidth-t.clientWidth)+1+"px",i=t.clientHeight+(t.offsetHeight-t.clientHeight)+1+"px";setTimeout((()=>{t.style.top=e,t.style.left=a,t.style.width=n,t.style.height=i,t.style.position="absolute"}),0)}(t),e&&await s(e*i),t.classList.add("animate__animated","animate__"+n),await s(1e3),t.classList.remove("animate__animated","animate__"+n)};function s(t){return new Promise((e=>{setTimeout(e,t)}))}const{in:o,out:f}=a({fxIn:"fadeInDown",fxOut:"fadeOutUp"}),{in:r,out:d}=a({fxIn:"fadeIn",fxOut:"fadeOut"});var c=e.qG,u=e.Ce,g=e.Xn,l=e.MV;export{c as fadeIn,u as fadeInDown,g as fadeOut,l as fadeOutUp};
|
|
143
2
|
//# sourceMappingURL=bundle.js.map
|
package/bundle.js.gz
ADDED
|
Binary file
|
package/bundle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bundle.js","mappings":"
|
|
1
|
+
{"version":3,"file":"bundle.js","mappings":"AACA,IAAIA,EAAsB,CCA1BA,EAAwB,CAACC,EAASC,KACjC,IAAI,IAAIC,KAAOD,EACXF,EAAoBI,EAAEF,EAAYC,KAASH,EAAoBI,EAAEH,EAASE,IAC5EE,OAAOC,eAAeL,EAASE,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDH,EAAwB,CAACS,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,I,KCA3E,SAASI,GAAS,KAAEC,EAAI,MAAEC,EAAK,UAAEC,EAAY,MAChD,MAAO,CACHC,GAAKC,GAAUC,EAAY,CAAEC,OAAQN,EAAME,eAAcE,IACzDG,IAAMH,GAAUI,EAAe,CAAEF,OAAQL,EAAOC,YAAWO,iBAAiB,KAASL,IAE7F,C,6CACA,MAAMC,EAAcK,OAASC,SAAQC,UAASV,YAAWI,SAAS,iBAC9DK,EAAOE,MAAMC,QAAU,IACnBF,SACMG,EAAKH,EAAUV,GAEzBS,EAAOE,MAAMC,QAAU,IACvBH,EAAOK,UAAUC,IAAI,oBAAqB,YAAcX,EAAO,EAE7DE,EAAiBE,OAASC,SAAQC,UAASH,mBAAkB,EAAMH,SAAS,YAAaJ,gBACvFO,GAWD,SAAgCS,GACnCA,EAAQL,MAAMM,OAASD,EAAQL,MAAMM,QAAU,EAC/C,MAAMC,EAAQF,EAAQG,UAAY,KAC5BC,EAASJ,EAAQK,WAAa,KAC9BC,EAAWN,EAAQO,aAAeP,EAAQQ,YAAcR,EAAQO,aAAe,EAAK,KACpFE,EAAYT,EAAQU,cAAgBV,EAAQW,aAAeX,EAAQU,cAAgB,EAAK,KAU9FE,YATY,KACRZ,EAAQL,MAAMkB,IAAMX,EACpBF,EAAQL,MAAMmB,KAAOV,EACrBJ,EAAQL,MAAMoB,MAAQT,EACtBN,EAAQL,MAAMqB,OAASP,EACvBT,EAAQL,MAAMsB,SAAW,UAAU,GAIvB,EACpB,CA1BQC,CAAuBzB,GAEvBC,SACMG,EAAKH,EAAUV,GAEzBS,EAAOK,UAAUC,IAAI,oBAAqB,YAAcX,SAClDS,EAAK,KACXJ,EAAOK,UAAUqB,OAAO,oBAAqB,YAAc/B,EAAO,EAoBtE,SAASS,EAAKuB,GACV,OAAO,IAAIC,SAASC,IAChBV,WAAWU,EAAKF,EAAK,GAE7B,CC9CO,MAAQnC,GAAIsC,EAAYlC,IAAKmC,GAAc3C,EAAS,CAAEC,KAAM,aAAcC,MAAO,eACzEE,GAAIwC,EAAQpC,IAAKqC,GAAY7C,EAAS,CAAEC,KAAM,SAAUC,MAAO,Y","sources":["webpack://taggedjs-animate-css/webpack/bootstrap","webpack://taggedjs-animate-css/webpack/runtime/define property getters","webpack://taggedjs-animate-css/webpack/runtime/hasOwnProperty shorthand","webpack://taggedjs-animate-css/./ts/createFx.function.ts","webpack://taggedjs-animate-css/./ts/index.ts"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","export function createFx({ fxIn, fxOut, staggerBy = 300, }) {\n return {\n in: (input) => animateInit({ fxName: fxIn, staggerBy, ...input }),\n out: (input) => animateDestroy({ fxName: fxOut, staggerBy, capturePosition: true, ...input }),\n };\n}\nconst animateInit = async ({ target, stagger, staggerBy, fxName = 'fadeInDown' }) => {\n target.style.opacity = '0';\n if (stagger) {\n await wait(stagger * staggerBy);\n }\n target.style.opacity = '1';\n target.classList.add('animate__animated', 'animate__' + fxName);\n};\nconst animateDestroy = async ({ target, stagger, capturePosition = true, fxName = 'fadeOutUp', staggerBy }) => {\n if (capturePosition) {\n captureElementPosition(target);\n }\n if (stagger) {\n await wait(stagger * staggerBy);\n }\n target.classList.add('animate__animated', 'animate__' + fxName);\n await wait(1000); // don't allow remove from stage until animation completed\n target.classList.remove('animate__animated', 'animate__' + fxName);\n};\n// absolute\nexport function captureElementPosition(element) {\n element.style.zIndex = element.style.zIndex || 1;\n const toTop = element.offsetTop + 'px';\n const toLeft = element.offsetLeft + 'px';\n const toWidth = (element.clientWidth + (element.offsetWidth - element.clientWidth) + 1) + 'px';\n const toHeight = (element.clientHeight + (element.offsetHeight - element.clientHeight) + 1) + 'px';\n const fix = () => {\n element.style.top = toTop;\n element.style.left = toLeft;\n element.style.width = toWidth;\n element.style.height = toHeight;\n element.style.position = 'absolute';\n };\n // element.style.position = 'fixed'\n // allow other elements that are being removed to have a moment to figure out where they currently sit\n setTimeout(fix, 0);\n}\nfunction wait(time) {\n return new Promise((res) => {\n setTimeout(res, time);\n });\n}\n","import { createFx } from \"./createFx.function.js\";\nexport const { in: fadeInDown, out: fadeOutUp } = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp' });\nexport const { in: fadeIn, out: fadeOut } = createFx({ fxIn: 'fadeIn', fxOut: 'fadeOut' });\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","createFx","fxIn","fxOut","staggerBy","in","input","animateInit","fxName","out","animateDestroy","capturePosition","async","target","stagger","style","opacity","wait","classList","add","element","zIndex","toTop","offsetTop","toLeft","offsetLeft","toWidth","clientWidth","offsetWidth","toHeight","clientHeight","offsetHeight","setTimeout","top","left","width","height","position","captureElementPosition","remove","time","Promise","res","fadeInDown","fadeOutUp","fadeIn","fadeOut"],"sourceRoot":""}
|
package/bundle.js.map.gz
ADDED
|
Binary file
|
package/js/index.d.ts
CHANGED
|
@@ -5,3 +5,10 @@ export declare const fadeInDown: (input: {
|
|
|
5
5
|
target: HTMLElement;
|
|
6
6
|
stagger: number;
|
|
7
7
|
}) => Promise<void>;
|
|
8
|
+
export declare const fadeIn: (input: {
|
|
9
|
+
target: HTMLElement;
|
|
10
|
+
stagger: number;
|
|
11
|
+
}) => Promise<void>, fadeOut: (input: {
|
|
12
|
+
target: HTMLElement;
|
|
13
|
+
stagger: number;
|
|
14
|
+
}) => Promise<void>;
|
package/js/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import { createFx } from "./createFx.function";
|
|
1
|
+
import { createFx } from "./createFx.function.js";
|
|
2
2
|
export const { in: fadeInDown, out: fadeOutUp } = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp' });
|
|
3
|
+
export const { in: fadeIn, out: fadeOut } = createFx({ fxIn: 'fadeIn', fxOut: 'fadeOut' });
|
|
3
4
|
//# sourceMappingURL=index.js.map
|
package/js/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjD,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,EAAC,IAAI,EAAC,YAAY,EAAE,KAAK,EAAC,WAAW,EAAC,CAAC,CAAA;AAClG,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC,EAAC,IAAI,EAAC,QAAQ,EAAE,KAAK,EAAC,SAAS,EAAC,CAAC,CAAA"}
|