natxocc/sigpro
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

fade out no funcionaba
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-23 11:19:17 +02:00
parent 482ff19adb
commit a59d26f18a
7 changed files with 92 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
dist/sigpro.esm.js vendored
View File

@@ -455,23 +455,35 @@ var fx = ({ name, duration = 200, scale, slide, rotate, blur }, child) => {
return el; return el;
} }
const hasTransform = scale || slide || rotate || blur; const hasTransform = scale || slide || rotate || blur;
el.style.transition = hasTransform ? `all ${duration}ms` : ""; const initialTransform = [
scale ? "scale(0.95)" : "",
slide ? "translateY(-10px)" : "",
rotate ? "rotate(-2deg)" : ""
].filter(Boolean).join(" ");
el.style.transition = `all ${duration}ms ease`;
el.style.opacity = "0"; el.style.opacity = "0";
if (scale) if (hasTransform)
el.style.transform = "scale(0.95)"; el.style.transform = initialTransform;
if (slide)
el.style.transform = "translateY(-10px)";
if (rotate)
el.style.transform = "rotate(-2deg)";
if (blur) if (blur)
el.style.filter = "blur(4px)"; el.style.filter = "blur(4px)";
requestAnimationFrame(() => { requestAnimationFrame(() => {
el.style.opacity = "1"; el.style.opacity = "1";
el.style.transform = scale || slide || rotate || blur ? "" : "none"; if (hasTransform)
el.style.transform = "none";
if (blur)
el.style.filter = "none";
}); });
el._sig_leave = (done) => { el._sig_leave = (done) => {
el.style.opacity = "0"; el.style.opacity = "0";
el.addEventListener("transitionend", done, { once: true }); if (hasTransform)
el.style.transform = initialTransform;
if (blur)
el.style.filter = "blur(4px)";
const timer = setTimeout(done, duration + 20);
el.addEventListener("transitionend", () => {
clearTimeout(timer);
done();
}, { once: true });
}; };
return el; return el;
}; };

2
dist/sigpro.esm.min.js vendored
View File

File diff suppressed because one or more lines are too long

30
dist/sigpro.js vendored
View File

@@ -510,23 +510,35 @@
return el; return el;
} }
const hasTransform = scale || slide || rotate || blur; const hasTransform = scale || slide || rotate || blur;
el.style.transition = hasTransform ? `all ${duration}ms` : ""; const initialTransform = [
scale ? "scale(0.95)" : "",
slide ? "translateY(-10px)" : "",
rotate ? "rotate(-2deg)" : ""
].filter(Boolean).join(" ");
el.style.transition = `all ${duration}ms ease`;
el.style.opacity = "0"; el.style.opacity = "0";
if (scale) if (hasTransform)
el.style.transform = "scale(0.95)"; el.style.transform = initialTransform;
if (slide)
el.style.transform = "translateY(-10px)";
if (rotate)
el.style.transform = "rotate(-2deg)";
if (blur) if (blur)
el.style.filter = "blur(4px)"; el.style.filter = "blur(4px)";
requestAnimationFrame(() => { requestAnimationFrame(() => {
el.style.opacity = "1"; el.style.opacity = "1";
el.style.transform = scale || slide || rotate || blur ? "" : "none"; if (hasTransform)
el.style.transform = "none";
if (blur)
el.style.filter = "none";
}); });
el._sig_leave = (done) => { el._sig_leave = (done) => {
el.style.opacity = "0"; el.style.opacity = "0";
el.addEventListener("transitionend", done, { once: true }); if (hasTransform)
el.style.transform = initialTransform;
if (blur)
el.style.filter = "blur(4px)";
const timer = setTimeout(done, duration + 20);
el.addEventListener("transitionend", () => {
clearTimeout(timer);
done();
}, { once: true });
}; };
return el; return el;
}; };

2
dist/sigpro.min.js vendored
View File

File diff suppressed because one or more lines are too long

30
docs/sigpro.js
View File

@@ -510,23 +510,35 @@
return el; return el;
} }
const hasTransform = scale || slide || rotate || blur; const hasTransform = scale || slide || rotate || blur;
el.style.transition = hasTransform ? `all ${duration}ms` : ""; const initialTransform = [
scale ? "scale(0.95)" : "",
slide ? "translateY(-10px)" : "",
rotate ? "rotate(-2deg)" : ""
].filter(Boolean).join(" ");
el.style.transition = `all ${duration}ms ease`;
el.style.opacity = "0"; el.style.opacity = "0";
if (scale) if (hasTransform)
el.style.transform = "scale(0.95)"; el.style.transform = initialTransform;
if (slide)
el.style.transform = "translateY(-10px)";
if (rotate)
el.style.transform = "rotate(-2deg)";
if (blur) if (blur)
el.style.filter = "blur(4px)"; el.style.filter = "blur(4px)";
requestAnimationFrame(() => { requestAnimationFrame(() => {
el.style.opacity = "1"; el.style.opacity = "1";
el.style.transform = scale || slide || rotate || blur ? "" : "none"; if (hasTransform)
el.style.transform = "none";
if (blur)
el.style.filter = "none";
}); });
el._sig_leave = (done) => { el._sig_leave = (done) => {
el.style.opacity = "0"; el.style.opacity = "0";
el.addEventListener("transitionend", done, { once: true }); if (hasTransform)
el.style.transform = initialTransform;
if (blur)
el.style.filter = "blur(4px)";
const timer = setTimeout(done, duration + 20);
el.addEventListener("transitionend", () => {
clearTimeout(timer);
done();
}, { once: true });
}; };
return el; return el;
}; };

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "sigpro", "name": "sigpro",
"version": "1.2.15", "version": "1.2.17",
"type": "module", "type": "module",
"license": "MIT", "license": "MIT",
"main": "./dist/sigpro.esm.min.js", "main": "./dist/sigpro.esm.min.js",

40
sigpro.js
View File

@@ -1,4 +1,4 @@
// sigpro 1.2.16 // sigpro 1.2.17
const isFunc = f => typeof f === "function" const isFunc = f => typeof f === "function"
const isObj = o => o && typeof o === "object" const isObj = o => o && typeof o === "object"
const isArr = Array.isArray const isArr = Array.isArray
@@ -435,35 +435,47 @@ const when = (cond, SIP, NOP = null) => {
return root return root
} }
const fx = ({ name, duration = 200, scale, slide, rotate, blur }, child) => { var fx = ({ name, duration = 200, scale, slide, rotate, blur }, child) => {
const el = typeof child === 'function' ? child() : child; const el = typeof child === "function" ? child() : child;
if (!(el instanceof Node)) return el; if (!(el instanceof Node)) return el;
if (name) { if (name) {
el.style.animation = `${name}-in ${duration}ms`; el.style.animation = `${name}-in ${duration}ms`;
el._sig_leave = (done) => { el._sig_leave = (done) => {
el.style.animation = `${name}-out ${duration}ms`; el.style.animation = `${name}-out ${duration}ms`;
el.addEventListener('animationend', done, { once: true }); el.addEventListener("animationend", done, { once: true });
}; };
return el; return el;
} }
const hasTransform = scale || slide || rotate || blur; const hasTransform = scale || slide || rotate || blur;
el.style.transition = hasTransform ? `all ${duration}ms` : ''; const initialTransform = [
el.style.opacity = '0'; scale ? "scale(0.95)" : "",
if (scale) el.style.transform = 'scale(0.95)'; slide ? "translateY(-10px)" : "",
if (slide) el.style.transform = 'translateY(-10px)'; rotate ? "rotate(-2deg)" : ""
if (rotate) el.style.transform = 'rotate(-2deg)'; ].filter(Boolean).join(" ");
if (blur) el.style.filter = 'blur(4px)';
el.style.transition = `all ${duration}ms ease`;
el.style.opacity = "0";
if (hasTransform) el.style.transform = initialTransform;
if (blur) el.style.filter = "blur(4px)";
requestAnimationFrame(() => { requestAnimationFrame(() => {
el.style.opacity = '1'; el.style.opacity = "1";
el.style.transform = scale || slide || rotate || blur ? '' : 'none'; if (hasTransform) el.style.transform = "none";
if (blur) el.style.filter = "none";
}); });
el._sig_leave = (done) => { el._sig_leave = (done) => {
el.style.opacity = '0'; el.style.opacity = "0";
el.addEventListener('transitionend', done, { once: true }); if (hasTransform) el.style.transform = initialTransform;
if (blur) el.style.filter = "blur(4px)";
const timer = setTimeout(done, duration + 20);
el.addEventListener("transitionend", () => {
clearTimeout(timer);
done();
}, { once: true });
}; };
return el; return el;