fix(@okikio/animate): 🐛 fix transfom is "" bug; use document.timeline…

… as default timeline; avoid other errors causing this.vibilityPlaystate error; timeline can no longer be a function/callback; WIP KeyframeEffect support is low; fallback to `HTMLElement.animate(...)`
okikio · May 26, 2021 · da5e640 · da5e640
1 parent d878018
commit da5e640
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 18 deletions.
diff --git a/packages/animate/@types/api.d.ts b/packages/animate/@types/api.d.ts
@@ -370,6 +370,7 @@ export declare class Animate {
         oldCSSProperties: any;
         onfinish: any;
         oncancel: any;
+        timeline?: any;
     }, len: number): void;
     /**
      * Update the options for all targets

diff --git a/packages/animate/lib/api.cjs.js b/packages/animate/lib/api.cjs.js
diff --git a/packages/animate/lib/api.es.js b/packages/animate/lib/api.es.js
diff --git a/packages/animate/lib/api.js b/packages/animate/lib/api.js
diff --git a/packages/animate/src/api.ts b/packages/animate/src/api.ts
@@ -205,6 +205,7 @@ export const DefaultAnimationOptions: IAnimationOptions = {
     fillMode: "none",
     direction: "normal",
     padEndDelay: false,
+    timeline: document.timeline,
     extend: {}
 };
 
@@ -337,12 +338,14 @@ export class Animate {
     constructor(options: IAnimationOptions) {
         this.loop = this.loop.bind(this);
         this.onVisibilityChange = this.onVisibilityChange.bind(this);
-        this.on("error", (err) => console.error(err));
+        this.on("error", console.error);
         this.updateOptions(options);
 
-        this.visibilityPlayState = this.getPlayState();
-        if (Animate.pauseOnPageHidden) {
-            document.addEventListener('visibilitychange', this.onVisibilityChange, false);
+        if (this.mainAnimation) {
+            this.visibilityPlayState = this.getPlayState();
+            if (Animate.pauseOnPageHidden) {
+                document.addEventListener('visibilitychange', this.onVisibilityChange, false);
+            }
         }
 
         this.newPromise();
@@ -736,13 +739,14 @@ export class Animate {
     /**
      * Creates animations out of an array of computed options
      */
-    protected createAnimations(param: { arrOfComputedOptions: any; padEndDelay: any; oldCSSProperties: any; onfinish: any; oncancel: any; }, len: number) {
+    protected createAnimations(param: { arrOfComputedOptions: any; padEndDelay: any; oldCSSProperties: any; onfinish: any; oncancel: any; timeline?: any; }, len: number) {
         let {
             arrOfComputedOptions,
             padEndDelay,
             oldCSSProperties,
             onfinish,
-            oncancel
+            oncancel,
+            timeline
         } = param;
 
         this.targets.forEach((target: HTMLElement, i) => {
@@ -802,7 +806,7 @@ export class Animate {
                     // Remove `speed` & `loop`, they are not valid CSS properties
                     let { easing, offset, ...remaining } = omit(["speed", "loop"], keyframe);
 
-                    return Object.assign({ },
+                    return Object.assign({},
                         remaining,
                         typeof easing == "string" ? { easing: GetEase(easing) } : null,
                         typeof offset == "string" || typeof offset == "number"
@@ -825,7 +829,7 @@ export class Animate {
             } else {
                 // Create animation and add it to the Animations Set
                 keyFrameEffect = new KeyframeEffect(target, computedKeyframes, computedOptions as KeyframeAnimationOptions);
-                animation = new Animation(keyFrameEffect, computedOptions.timeline);
+                animation = new Animation(keyFrameEffect, timeline);
 
                 this.keyframeEffects.set(target, keyFrameEffect);
                 this.animations.set(keyFrameEffect, animation);
@@ -866,11 +870,13 @@ export class Animate {
             let {
                 // These values cannot be functions
                 padEndDelay,
-                onfinish,
-                oncancel,
                 autoplay,
                 target,
                 targets,
+                timeline,
+
+                onfinish,
+                oncancel,
 
                 /**
                  * Theses are the CSS properties to be animated as Keyframes
@@ -879,7 +885,7 @@ export class Animate {
             } = omit(sharedTimingKeys, this.options);
 
             // This removes all none CSS properties from `optionsFromParam`
-            this.properties = omit([...sharedTimingKeys, "keyframes", "padEndDelay", "onfinish", "oncancel", "autoplay", "target", "targets"], optionsFromParam);
+            this.properties = omit([...sharedTimingKeys, "keyframes", "padEndDelay", "onfinish", "oncancel", "autoplay", "target", "targets", "timeline"], optionsFromParam);
 
             // Avoid duplicate elements
             let oldTargets = this.targets.values();
@@ -897,11 +903,12 @@ export class Animate {
                 padEndDelay,
                 oldCSSProperties,
                 onfinish,
-                oncancel
+                oncancel,
+                timeline
             }, len);
 
             this.maxSpeed = this.maxSpeed ?? this.options.speed as number;
-            this.minDelay = this.minDelay ??  this.options.delay as number;
+            this.minDelay = this.minDelay ?? this.options.delay as number;
             this.totalDuration = this.totalDuration ?? this.options.duration as number;
 
             if (!this.mainAnimation) {
@@ -914,7 +921,7 @@ export class Animate {
                     easing: "linear"
                 });
 
-                this.mainAnimation = new Animation(this.mainkeyframeEffect, this.options.timeline);
+                this.mainAnimation = new Animation(this.mainkeyframeEffect, timeline);
             } else {
                 this.mainkeyframeEffect?.updateTiming?.({
                     duration: this.totalDuration

diff --git a/packages/animate/src/css-properties.ts b/packages/animate/src/css-properties.ts
@@ -299,7 +299,7 @@ export const ParseTransformableCSSProperties = (properties: ICSSComputedTransfor
         scale, scale3d, scaleX, scaleY, scaleZ,
         skew, skewX, skewY,
         perspective
-    ).map(createTransformProperty);
+    ).filter(isValid).map(createTransformProperty);
 
     // Wrap non array CSS property values in an array
     rest = mapObject(rest, value => [].concat(value).map(v => `` + v));
@@ -377,6 +377,7 @@ export const ParseTransformableCSSKeyframes = (keyframes: ICSSComputedTransforma
         ];
     }).map(([rest, ...transformFunctions]) => {
         let transform = createTransformProperty(transformFunctions);
+
         return Object.assign({},
             isValid(transform) ? { transform } : null,
             rest);