fix: fix selectorAll function

daybrush · Dec 15, 2022 · e6bf87a · e6bf87a
1 parent de47f51
commit e6bf87a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 98 deletions.
diff --git a/packages/react-scenejs/src/App.css b/packages/react-scenejs/src/App.css
@@ -1,4 +1,7 @@
-
+html, body, #root,.root, .App {
+  position: relative;
+  height: 100%;
+}
 .motion {
   position: absolute;
   left: 0;

diff --git a/packages/react-scenejs/src/App.tsx b/packages/react-scenejs/src/App.tsx
@@ -1,112 +1,42 @@
 import React, { useEffect } from 'react';
 import './App.css';
 import { useScene } from './react-scenejs/useScene';
-import { EASE_OUT } from 'scenejs';
+import { EASE_OUT, selectorAll } from 'scenejs';
 import { useNowFrame } from './react-scenejs';
 
-function App() {
-  const scene = useScene({
-    ".circle1": {
-      0: {
-        "border-width": "70px",
-        "transform": "scale(0)",
-      },
-      1: {
-        "border-width": "0px",
-        "transform": "scale(1.5)",
-      },
-      2: 1,
-    },
-    ".triangle": {
-      0: {
-        transform: "rotate(0deg) translate(0px) scale(0.5)",
-        opacity: 1,
-      },
-      1.5: {
-        transform: "rotate(40deg) translate(100px) scale(1)",
-        opacity: 0,
-      },
-    },
-    ".rectangle1": {
-      0: {
-        opacity: 1,
-        transform: "rotate(0deg) translate(0px) scale(0.3)",
-      },
-      1.5: {
-        transform: "rotate(-40deg) translate(-100px) scale(0.9)",
-        opacity: 0,
-      },
-    },
-    ".rectangle2": {
-      0: {
-        transform: " translate(0px, 0px) rotate(0deg) scale(0.3)",
-        opacity: 1,
-      },
-      1.5: {
-        transform: "translate(100px, -100px) rotate(70deg) scale(0.7)",
-        opacity: 0,
-      },
-    },
-    ".circle2": {
-      0: {
-        transform: " translate(0px, 0px) scale(0.7)",
-        opacity: 1,
-      },
-      1.5: {
-        transform: "translate(-100px, -50px) scale(1)",
-        opacity: 0,
-      },
+
+export default function App() {
+  const scene = useScene(
+    {
+      ".raindrop": selectorAll(
+        (i) => ({
+          0: { "border-width": "150px", opacity: 1, transform: "scale(0)" },
+          1.5: { "border-width": "0px", opacity: 0.3, transform: "scale(0.7)" },
+          options: { delay: i * 0.4 }
+        }),
+        3
+      )
     },
-    ".star1": {
-      0: {
-        transform: "translateY(0px) rotate(0deg) scale(0.5)",
-        opacity: 1,
-      },
-      1.5: {
-        transform: "translateY(-100px) rotate(90deg) scale(1)",
-        opacity: 0,
-      }
+    {
+      easing: "ease-in-out",
+      iterationCount: "infinite"
     }
-  }, {
-    easing: EASE_OUT,
-    iterationCount: "infinite",
-    fillMode: "forwards",
-  });
-
+  );
 
   useEffect(() => {
+    scene.setSelector(true);
     scene.play();
 
     return () => {
       scene.finish();
-    }
+    };
   }, []);
-
-  const starFrame1 = useNowFrame(scene.getItem(".star1"));
-  const rectFrame1 = useNowFrame(scene.getItem(".rectangle1"));
 
   return (
     <div className="App">
-      <div className="area">
-        <div className="motion">
-          <div className="circle circle1"></div>
-          <div className="circle circle2"></div>
-          <div className="triangle"></div>
-          <div className="rectangle rectangle1" style={rectFrame1.camelCasedCSSObject}></div>
-          <div className="rectangle rectangle2"></div>
-          <div className="star star1" style={starFrame1.camelCasedCSSObject}>
-            <div className="star">
-              <div className="star">
-                <div className="star">
-                  <div className="star"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <div className="raindrop raindrop1"></div>
+      <div className="raindrop raindrop2"></div>
+      <div className="raindrop raindrop3"></div>
     </div>
   );
 }
-
-export default App;
diff --git a/packages/scenejs/src/Scene.ts b/packages/scenejs/src/Scene.ts
@@ -455,12 +455,14 @@ console.log(scene.getItem(".a").get(1, "opacity"));
                 const length = elementsLength || (object as SelectorAllType).defaultCount || 0;
                 const scene = new Scene();
 
+                const ids: Array<string | number> = [];
                 for (let i = 0; i < length; ++i) {
                     const element = elements[i];
                     const subItem = scene.newItem(i) as SceneItem;
 
                     subItem.setId().load(object(i, elements[i]));
 
+                    ids.push(subItem.getId());
                     if (element) {
                         subItem.setElement(element);
                     }
@@ -469,9 +471,11 @@ console.log(scene.getItem(".a").get(1, "opacity"));
                     let subElements: IArrayFormat<AnimateElement> = [];
 
                     scene.state[SELECTOR] = (id: number) => {
-                        subElements = subElements || $(`${isFunction(selector) ? selector(name) : name}`, true);
+                        if (!subElements.length) {
+                            subElements = $(`${isFunction(selector) ? selector(name) : name}`, true);
+                        }
 
-                        return subElements[id];
+                        return subElements[ids.indexOf(id)];
                     };
                 }
                 this.setItem(name, scene);

diff --git a/packages/scenejs/src/SceneItem.ts b/packages/scenejs/src/SceneItem.ts
@@ -498,9 +498,9 @@ class SceneItem extends Animator<SceneItemOptions, SceneItemState, SceneItemEven
      * @example
 item.setSelector("#id.class");
      */
-    public setSelector(target: string | boolean | ((id: number | string) => string | AnimateElement)) {
+    public setSelector(target: string | boolean | ((id: number | string, index: number) => string | AnimateElement)) {
         if (isFunction(target)) {
-            this.setElement(target(this.getId()));
+            this.setElement(target(this.getId(), 0));
         } else {
             this.setElement(target);
         }

diff --git a/packages/scenejs/src/types.ts b/packages/scenejs/src/types.ts
@@ -169,7 +169,7 @@ export type AnimateElement = HTMLElement | SVGElement;
  */
 export interface PlayCondition {
     className?: string;
-    selector?: string | ((item: SceneItem, selector: string) => string);
+    selector?: string | ((item: SceneItem, selector: string) => string | AnimateElement);
 }
 
 /**