taggedjs-animate-css 0.0.4 → 0.0.7
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 +24 -1
- package/bundle.js +3 -1
- package/bundle.js.gz +0 -0
- package/bundle.js.map +1 -1
- package/bundle.js.map.gz +0 -0
- package/js/createFx.function.d.ts +1 -2
- package/js/index.d.ts +12 -7
- package/js/index.js +12 -0
- package/js/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,2 +1,25 @@
|
|
|
1
1
|
# taggedjs-animate-css
|
|
2
|
-
HTML and CSS animations for TaggedJs brought to us by animate-css
|
|
2
|
+
HTML and CSS animations for TaggedJs brought to us by [animate-css](https://animate.style/)
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
## Speed
|
|
6
|
+
|
|
7
|
+
### Speed by class name
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<div class="animate__slow" init=${fadeIn} ondestroy=${fadeOut}>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
| Class name | Default speed time |
|
|
14
|
+
| ---------- | ------------------ |
|
|
15
|
+
| animate__slow | 2s |
|
|
16
|
+
| animate__slower | 3s |
|
|
17
|
+
| animate__fast | 800ms |
|
|
18
|
+
| animate__faster | 500ms |
|
|
19
|
+
|
|
20
|
+
### Speed by number
|
|
21
|
+
|
|
22
|
+
```html
|
|
23
|
+
<div style="--animate-duration: .1s;" init=${fadeIn} ondestroy=${fadeOut}></div>
|
|
24
|
+
```
|
|
25
|
+
|
package/bundle.js
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
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={};t.d(e,{
|
|
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),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.d(e,{mi:()=>l,qG:()=>d,Ce:()=>r,Xn:()=>u,MV:()=>f});var a={};function n({fxIn:t,fxOut:e,staggerBy:a=300}){return{in:e=>i({fxName:t,staggerBy:a,...e}),out:t=>o({fxName:e,staggerBy:a,capturePosition:!0,...t})}}t.r(a),t.d(a,{mi:()=>l,qG:()=>d,Ce:()=>r,Xn:()=>u,MV:()=>f});const i=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)},o=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:r,out:f}=n({fxIn:"fadeInDown",fxOut:"fadeOutUp"}),{in:d,out:u}=n({fxIn:"fadeIn",fxOut:"fadeOut"}),l=({fxIn:t=r,fxOut:e=f,duration:n=".1s"}={fxIn:r,fxOut:f,duration:".1s"})=>{const i=(0,a.getInnerHTML)();return a.html`
|
|
2
|
+
<div oninit=${t} ondestroy=${e} style="--animate-duration: ${n};">${i}</div>
|
|
3
|
+
`.setInnerHTML(i)};var y=e.mi,m=e.qG,g=e.Ce,c=e.Xn,p=e.MV;export{y as animateWrap,m as fadeIn,g as fadeInDown,c as fadeOut,p as fadeOutUp};
|
|
2
4
|
//# sourceMappingURL=bundle.js.map
|
package/bundle.js.gz
CHANGED
|
Binary file
|
package/bundle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,GCClFV,EAAyBC,IACH,oBAAXa,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeL,EAASa,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeL,EAAS,aAAc,CAAEe,OAAO,GAAO,G,oECLvD,SAASC,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,6DACA,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,CC7CO,MAAQnC,GAAIsC,EAAYlC,IAAKmC,GAAc3C,EAAS,CAAEC,KAAM,aAAcC,MAAO,eACzEE,GAAIwC,EAAQpC,IAAKqC,GAAY7C,EAAS,CAAEC,KAAM,SAAUC,MAAO,YACjE4C,EAAc,EAAG7C,OAAOyC,EAAYxC,QAAQyC,EAAWI,WAAW,OAAW,CACtF9C,KAAMyC,EACNxC,MAAOyC,EACPI,SAAU,UAEV,MAAMC,GAAY,IAAAC,gBAClB,OAAO,EAAAC,IAAK;kBACEjD,eAAkBC,gCAAoC6C,OAAcC;IAClFG,aAAaH,EAAU,E","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/webpack/runtime/make namespace object","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))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","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\";\nimport { getInnerHTML, html } from \"taggedjs\";\nexport const { in: fadeInDown, out: fadeOutUp } = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp' });\nexport const { in: fadeIn, out: fadeOut } = createFx({ fxIn: 'fadeIn', fxOut: 'fadeOut' });\nexport const animateWrap = ({ fxIn = fadeInDown, fxOut = fadeOutUp, duration = '.1s', } = {\n fxIn: fadeInDown,\n fxOut: fadeOutUp,\n duration: '.1s',\n}) => {\n const innerHTML = getInnerHTML();\n return html `\n <div oninit=${fxIn} ondestroy=${fxOut} style=\"--animate-duration: ${duration};\">${innerHTML}</div>\n `.setInnerHTML(innerHTML);\n};\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","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","animateWrap","duration","innerHTML","getInnerHTML","html","setInnerHTML"],"sourceRoot":""}
|
package/bundle.js.map.gz
CHANGED
|
Binary file
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
type ElementEvent = {
|
|
1
|
+
export type ElementEvent = {
|
|
2
2
|
target: HTMLElement;
|
|
3
3
|
stagger: number;
|
|
4
4
|
};
|
|
@@ -11,4 +11,3 @@ export declare function createFx({ fxIn, fxOut, staggerBy, }: {
|
|
|
11
11
|
out: (input: ElementEvent) => Promise<void>;
|
|
12
12
|
};
|
|
13
13
|
export declare function captureElementPosition(element: any): void;
|
|
14
|
-
export {};
|
package/js/index.d.ts
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { ElementEvent } from "./createFx.function.js";
|
|
2
|
+
export declare const fadeInDown: (input: ElementEvent) => Promise<void>, fadeOutUp: (input: ElementEvent) => Promise<void>;
|
|
3
|
+
export declare const fadeIn: (input: ElementEvent) => Promise<void>, fadeOut: (input: ElementEvent) => Promise<void>;
|
|
4
|
+
export type AnimateWrapOptions = {
|
|
5
|
+
/** fadeInDown or fadeIn */
|
|
6
|
+
fxIn?: (input: ElementEvent) => Promise<void>;
|
|
7
|
+
/** fadeOutUp or fadeOut */
|
|
8
|
+
fxOut?: (input: ElementEvent) => Promise<void>;
|
|
9
|
+
/** Ex: .1s */
|
|
10
|
+
duration: string;
|
|
11
|
+
};
|
|
12
|
+
export declare const animateWrap: ({ fxIn, fxOut, duration, }?: AnimateWrapOptions) => import("taggedjs").Tag;
|
package/js/index.js
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
1
|
import { createFx } from "./createFx.function.js";
|
|
2
|
+
import { getInnerHTML, html } from "taggedjs";
|
|
2
3
|
export const { in: fadeInDown, out: fadeOutUp } = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp' });
|
|
4
|
+
export const { in: fadeIn, out: fadeOut } = createFx({ fxIn: 'fadeIn', fxOut: 'fadeOut' });
|
|
5
|
+
export const animateWrap = ({ fxIn = fadeInDown, fxOut = fadeOutUp, duration = '.1s', } = {
|
|
6
|
+
fxIn: fadeInDown,
|
|
7
|
+
fxOut: fadeOutUp,
|
|
8
|
+
duration: '.1s',
|
|
9
|
+
}) => {
|
|
10
|
+
const innerHTML = getInnerHTML();
|
|
11
|
+
return html `
|
|
12
|
+
<div oninit=${fxIn} ondestroy=${fxOut} style="--animate-duration: ${duration};">${innerHTML}</div>
|
|
13
|
+
`.setInnerHTML(innerHTML);
|
|
14
|
+
};
|
|
3
15
|
//# 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,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAgB,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE7C,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;AAatF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,IAAI,GAAG,UAAU,EACjB,KAAK,GAAG,SAAS,EACjB,QAAQ,GAAG,KAAK,MACM;IACtB,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,KAAK;CAChB,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,OAAO,IAAI,CAAA;kBACK,IAAI,cAAc,KAAK,+BAA+B,QAAQ,MAAM,SAAS;GAC5F,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;AAC3B,CAAC,CAAA"}
|