@zyzgroup/core-web 0.0.19 → 0.0.20

package/dist/zyzgroup_core_web.js

@@ -27146,6 +27146,8 @@ class oT {
 }
 function Xe(r) {
   switch (r) {
+    case "linear":
+      return [0, 0, 1, 1];
     case "ease":
       return [0.25, 0.1, 0.25, 1];
     case "ease-in":
@@ -27167,56 +27169,37 @@ class lT {
       this.objects.push({
         width: parseFloat(i.css("width")),
         height: parseFloat(i.css("height")),
-        dom: i
+        dom: i,
+        el: t,
+        originCSSObject: i.css()
+      }), t.addEventListener("transitionend", (s) => {
+        console.log("transitionend", s);
       });
     }), this;
   }
   toCSS(e, ...t) {
-    switch (this[e](...t), this.objects[0].dom?.parent().css({ position: "relative", perspective: "1000px", overflow: "hidden" }), e) {
+    switch (this["_" + e](...t), this.objects[0].dom?.parent().css({ position: "relative", perspective: "1000px", overflow: "hidden" }), e) {
       default:
         this.objects.forEach((i, s) => {
           i.dom?.css({
             position: "absolute",
             "z-index": String(1e3 + s),
             "backface-visibility": "hidden"
+            // "transform-origin": "top left"
           });
         });
         break;
     }
     this.animates[e].forEach((i, s) => {
       const a = this.objects[s];
-      let n, o;
-      Array.isArray(i.attributeName) ? (n = i.attributeName, o = i.values) : (n = [i.attributeName], o = [i.values]), i.keyTimes.forEach((l, h) => {
-        const f = {};
+      let n = [], o = [];
+      Array.isArray(i.attributeName) ? (n = i.attributeName, o = i.values) : i.attributeName && (n = [i.attributeName], o = [i.values]), i.keyTimes.forEach((l, h) => {
+        const f = {
+          // transform: obj.dom?.css("transform") ?? ""
+        };
         n.forEach((d, c) => {
           const u = o[c][h];
-          switch (d) {
-            case "translate":
-              Object.assign(f, {
-                transform: `${f.transform ?? ""} translate3d(${u[0] ?? 0}px, ${u[1] ?? 0}px, ${u[2] ?? 0}px)`
-              });
-              break;
-            case "rotateX":
-              Object.assign(f, {
-                transform: `${f.transform ?? ""} rotateX(${u ?? 0}deg)`
-              });
-              break;
-            case "rotateY":
-              Object.assign(f, {
-                transform: `${f.transform ?? ""} rotateY(${u ?? 0}deg)`
-              });
-              break;
-            case "scale":
-              Object.assign(f, {
-                transform: `${f.transform ?? ""} scale(${u ?? 0})`
-              });
-              break;
-            case "opacity":
-              Object.assign(f, {
-                opacity: `${u ?? 0}`
-              });
-              break;
-          }
+          this._transformAttributeToCSSObject(d, u, f);
         }), h == 0 ? a.dom?.css(
           Object.assign(f, {
             transition: ""
@@ -27230,15 +27213,47 @@ class lT {
             })
           );
         }, i.begin), setTimeout(() => {
-          a.dom?.css({
-            transition: "",
-            transform: ""
-          });
+          i.fill === "remove" && a.dom?.css(a.originCSSObject ?? {});
         }, i.begin + i.dur);
       });
     });
   }
-  addAnimate(e, t) {
+  _transformAttributeToCSSObject(e, t, i = {}) {
+    switch (e) {
+      case "translate":
+        Object.assign(i, {
+          transform: `${i.transform ?? ""} translate3d(${t[0] ?? 0}px, ${t[1] ?? 0}px, ${t[2] ?? 0}px)`
+        });
+        break;
+      case "rotateX":
+        Object.assign(i, {
+          transform: `${i.transform ?? ""} rotateX(${t ?? 0}deg)`
+        });
+        break;
+      case "rotateY":
+        Object.assign(i, {
+          transform: `${i.transform ?? ""} rotateY(${t ?? 0}deg)`
+        });
+        break;
+      case "scale":
+        Object.assign(i, {
+          transform: `${i.transform ?? ""} scale(${t ?? 0})`
+        });
+        break;
+      case "opacity":
+        Object.assign(i, {
+          opacity: `${t ?? 0}`
+        });
+        break;
+      case "display":
+        Object.assign(i, {
+          display: `${t === "block" ? "block" : "none"}`
+        });
+        break;
+    }
+    return i;
+  }
+  _addAnimate(e, t) {
     Object.prototype.hasOwnProperty.call(this.animates, e) || (this.animates[e] = [], t.forEach((i) => {
       this.animates[e].push(
         Object.assign(i, {
@@ -27248,7 +27263,55 @@ class lT {
     }));
   }
   ////////////////////////////////////////////////////////////////////
-  slideLeft(e = "ease", t = 300, i = 0) {
+  // FLIP stands for First, Last, Invert, Play
+  // - First:
+  //    the initial state of the element(s) involved in the transition.
+  // - Last:
+  //    the final state of the element(s).
+  // - Invert:
+  //    here's the fun bit.
+  //    You figure out from the first and last how the element has changed, so - say - its width, height, opacity.
+  //    Next you apply transforms and opacity changes to reverse, or invert, them.
+  //    If the element has moved 90px down between First and Last, you would apply a transform of -90px in Y.
+  //    This makes the elements appear as though they're still in the First position but, crucially, they're not.
+  // - Play:
+  //    switch on transitions for any of the properties you changed, and then remove the inversion changes.
+  //    Because the element or elements are in their final position removing the transforms and opacities will ease them from their faux First position, out to the Last position.
+  _flip(e = "ease", t = 300, i = 0) {
+    if (this.objects.length == 2) {
+      const s = this.objects[0].el?.getBoundingClientRect();
+      this.objects[0].dom?.hide(), this.objects[0].originCSSObject = this.objects[0].dom?.css(), this.objects[1].dom?.show(), this.objects[1].originCSSObject = this.objects[1].dom?.css();
+      const a = this.objects[1].el?.getBoundingClientRect();
+      console.log(s, a), s && a && this._addAnimate("flip", [
+        {
+          attributeName: "",
+          begin: i,
+          dur: t,
+          values: [],
+          keyTimes: [],
+          keySplines: [],
+          fill: "remove"
+        },
+        {
+          attributeName: ["display", "translate", "scale"],
+          begin: i,
+          dur: t,
+          values: [
+            ["block", "block"],
+            [
+              [s.left - a.left, s.top - a.top],
+              [0, 0]
+            ],
+            [s.width / a.width, 1]
+          ],
+          keyTimes: [0, 1],
+          keySplines: [Xe(e)],
+          fill: "remove"
+        }
+      ]);
+    }
+  }
+  _slideLeft(e = "ease", t = 300, i = 0) {
     const s = [];
     this.objects.length == 1 ? s.push({
       attributeName: ["opacity", "translate"],
@@ -27283,9 +27346,9 @@ class lT {
       ],
       keyTimes: [0, 1],
       keySplines: [Xe(e)]
-    })), this.addAnimate("slideLeft", s);
+    })), this._addAnimate("slideLeft", s);
   }
-  slideRight(e = "ease", t = 300, i = 0) {
+  _slideRight(e = "ease", t = 300, i = 0) {
     const s = [];
     this.objects.length == 1 ? s.push({
       attributeName: ["opacity", "translate"],
@@ -27320,9 +27383,9 @@ class lT {
       ],
       keyTimes: [0, 1],
       keySplines: [Xe(e)]
-    })), this.addAnimate("slideRight", s);
+    })), this._addAnimate("slideRight", s);
   }
-  slideDown(e = "ease", t = 300, i = 0) {
+  _slideDown(e = "ease", t = 300, i = 0) {
     const s = [];
     this.objects.length == 1 ? s.push({
       attributeName: ["opacity", "translate"],
@@ -27357,9 +27420,9 @@ class lT {
       ],
       keyTimes: [0, 1],
       keySplines: [Xe(e)]
-    })), this.addAnimate("slideDown", s);
+    })), this._addAnimate("slideDown", s);
   }
-  slideUp(e = "ease", t = 300, i = 0) {
+  _slideUp(e = "ease", t = 300, i = 0) {
     const s = [];
     this.objects.length == 1 ? s.push({
       attributeName: ["opacity", "translate"],
@@ -27394,9 +27457,9 @@ class lT {
       ],
       keyTimes: [0, 1],
       keySplines: [Xe(e)]
-    })), this.addAnimate("slideUp", s);
+    })), this._addAnimate("slideUp", s);
   }
-  flipLeft(e = "ease", t = 300, i = 0) {
+  _flipLeft(e = "ease", t = 300, i = 0) {
     const s = [];
     this.objects.length == 1 ? s.push({
       attributeName: ["opacity", "rotateY"],
@@ -27422,9 +27485,9 @@ class lT {
       values: [-180, 0],
       keyTimes: [0, 1],
       keySplines: [Xe(e)]
-    })), this.addAnimate("flipLeft", s);
+    })), this._addAnimate("flipLeft", s);
   }
-  flipRight(e = "ease", t = 300, i = 0) {
+  _flipRight(e = "ease", t = 300, i = 0) {
     const s = [];
     this.objects.length == 1 ? s.push({
       attributeName: ["opacity", "rotateY"],
@@ -27450,9 +27513,9 @@ class lT {
       values: [180, 0],
       keyTimes: [0, 1],
       keySplines: [Xe(e)]
-    })), this.addAnimate("flipRight", s);
+    })), this._addAnimate("flipRight", s);
   }
-  flipDown(e = "ease", t = 300, i = 0) {
+  _flipDown(e = "ease", t = 300, i = 0) {
     const s = [];
     this.objects.length == 1 ? s.push({
       attributeName: ["opacity", "rotateX"],
@@ -27478,9 +27541,9 @@ class lT {
       values: [180, 0],
       keyTimes: [0, 1],
       keySplines: [Xe(e)]
-    })), this.addAnimate("flipDown", s);
+    })), this._addAnimate("flipDown", s);
   }
-  flipUp(e = "ease", t = 300, i = 0) {
+  _flipUp(e = "ease", t = 300, i = 0) {
     const s = [];
     this.objects.length == 1 ? s.push({
       attributeName: ["opacity", "rotateX"],
@@ -27506,9 +27569,9 @@ class lT {
       values: [-180, 0],
       keyTimes: [0, 1],
       keySplines: [Xe(e)]
-    })), this.addAnimate("flipUp", s);
+    })), this._addAnimate("flipUp", s);
   }
-  popIn(e = "ease", t = 300, i = 0) {
+  _popIn(e = "ease", t = 300, i = 0) {
     const s = [];
     this.objects.length == 1 ? s.push({
       attributeName: ["translate", "scale", "opacity"],
@@ -27548,9 +27611,9 @@ class lT {
       ],
       keyTimes: [0, 1],
       keySplines: [Xe(e)]
-    })), this.addAnimate("popIn", s);
+    })), this._addAnimate("popIn", s);
   }
-  popOut(e = "ease", t = 300, i = 0) {
+  _popOut(e = "ease", t = 300, i = 0) {
     const s = [];
     this.objects.length == 1 ? s.push({
       attributeName: ["translate", "scale", "opacity"],
@@ -27593,7 +27656,7 @@ class lT {
       ],
       keyTimes: [0, 1],
       keySplines: [Xe(e)]
-    })), this.addAnimate("popOut", s);
+    })), this._addAnimate("popOut", s);
   }
 }
 var Lh = null;