wip compose

itsdouges · Jun 24, 2019 · 1f96779 · 1f96779
1 parent 79a0923
commit 1f96779
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 27 deletions.
diff --git a/packages/motions/src/Move/New.tsx b/packages/motions/src/Move/New.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Translate, { TranslateProps } from '../Translate';
+import Scale, { ScaleProps } from '../Scale';
+
+export default class NewMove extends React.Component<TranslateProps & ScaleProps> {
+  render() {
+    const { children, ...props } = this.props;
+    return (
+      <Scale {...props}>
+        <Translate {...props}>{children}</Translate>
+      </Scale>
+    );
+  }
+}
diff --git a/packages/motions/src/Move/stories.tsx b/packages/motions/src/Move/stories.tsx
@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react';
 import { createMoveExamples } from '@element-motion/dev';
 import Motion from '../../../core/src/Motion';
 import Move from './index';
+import NewMove from './New';
 
 const Examples = createMoveExamples({
   namePrefix: 'Move',
@@ -10,3 +11,11 @@ const Examples = createMoveExamples({
 
 const stories = storiesOf('@element-motion/core/Move', module);
 Object.keys(Examples).forEach(key => stories.add(key, Examples[key]));
+
+const NewExamples = createMoveExamples({
+  namePrefix: 'NewMove',
+  useDistinctEnd: false,
+})(Motion, NewMove as any);
+
+const newStories = storiesOf('@element-motion/core/NewMove', module);
+Object.keys(NewExamples).forEach(key => newStories.add(key, NewExamples[key]));
diff --git a/packages/motions/src/Scale/index.tsx b/packages/motions/src/Scale/index.tsx
@@ -24,8 +24,8 @@ const buildKeyframes = (elements: MotionData, duration: number, bezierCurve: str
   const startY = originBoundingBox.size.height / destinationBoundingBox.size.height;
   const endX = 1;
   const endY = 1;
-  const outerAnimation: string[] = [];
-  const innerAnimation: string[] = [];
+  const animation: string[] = [];
+  const inverseAnimation: string[] = [];
 
   for (let i = 0; i <= nFrames; i += 1) {
     const step = Number(timingFunction(i / nFrames).toFixed(5));
@@ -35,20 +35,20 @@ const buildKeyframes = (elements: MotionData, duration: number, bezierCurve: str
     const invScaleX = (1 / xScale).toFixed(5);
     const invScaleY = (1 / yScale).toFixed(5);
 
-    outerAnimation.push(`
+    animation.push(`
       ${percentage}% {
-        transform: scale(${xScale}, ${yScale});
+        transform: scale3d(${xScale}, ${yScale}, 1);
       }`);
 
-    innerAnimation.push(`
+    inverseAnimation.push(`
       ${percentage}% {
-        transform: scale(${invScaleX}, ${invScaleY});
+        transform: scale3d(${invScaleX}, ${invScaleY}, 1);
       }`);
   }
 
   return {
-    outer: keyframes(outerAnimation),
-    inner: keyframes(innerAnimation),
+    animation: keyframes(animation),
+    inverseAnimation: keyframes(inverseAnimation),
   };
 };
 
@@ -60,8 +60,8 @@ const Scale: React.FC<ScaleProps> = ({
   timingFunction = standard(),
 }: ScaleProps) => {
   let calculatedDuration: number;
-  let outerKeyframes: string;
-  let innerKeyframes: string;
+  let animation: string;
+  let inverseAnimation: string;
 
   return (
     <Collector
@@ -84,7 +84,7 @@ const Scale: React.FC<ScaleProps> = ({
                   )
                 : duration;
 
-            ({ outer: outerKeyframes, inner: innerKeyframes } = buildKeyframes(
+            ({ animation, inverseAnimation } = buildKeyframes(
               elements,
               calculatedDuration,
               timingFunction
@@ -102,22 +102,22 @@ const Scale: React.FC<ScaleProps> = ({
               style: prevStyle => ({
                 ...prevStyle,
                 ...common,
-                transform: combine(`scale3d(${scaleToX}, ${scaleToY}, 1)`)(prevStyle.transform),
+                transform: combine(`scale3d(${scaleToX}, ${scaleToY}, 1)`, '')(prevStyle.transform),
                 animationDuration: `${calculatedDuration}ms`,
-                animationName: combine(outerKeyframes)(prevStyle.animationName),
+                animationName: combine(animation)(prevStyle.animationName),
               }),
               className: () =>
                 css({
                   [`.${INVERSE_SCALE_CLASS_NAME}`]: {
                     ...common,
                     transform: `scale3d(${inverseScaleToX}, ${inverseScaleToY}, 1)`,
                     animationDuration: `${calculatedDuration}ms`,
-                    animationName: `${innerKeyframes}`,
+                    animationName: inverseAnimation,
                   },
                 }),
             });
 
-            onFinish();
+            // onFinish();
           },
           animate: (_, onFinish, setChildProps) => {
             setChildProps({

diff --git a/packages/motions/src/Translate/index.tsx b/packages/motions/src/Translate/index.tsx
@@ -27,8 +27,8 @@ const buildKeyframes = (elements: MotionData, duration: number, bezierCurve: str
   const startY = originBoundingBox.location.top - destinationBoundingBox.location.top;
   const endX = 0;
   const endY = 0;
-  const outerAnimation: string[] = [];
-  const innerAnimation: string[] = [];
+  const animation: string[] = [];
+  const inverseAnimation: string[] = [];
 
   for (let i = 0; i <= nFrames; i += 1) {
     const step = Number(timingFunction(i / nFrames).toFixed(5));
@@ -38,20 +38,20 @@ const buildKeyframes = (elements: MotionData, duration: number, bezierCurve: str
     const inverseTranslateToX = -translateToX;
     const inverseTranslateToY = -translateToY;
 
-    outerAnimation.push(`
+    animation.push(`
       ${percentage}% {
         transform: translate3d(${translateToX}px, ${translateToY}px, 0);
       }`);
 
-    innerAnimation.push(`
+    inverseAnimation.push(`
       ${percentage}% {
         transform: translate3d(${inverseTranslateToX}px, ${inverseTranslateToY}px, 0);
       }`);
   }
 
   return {
-    outer: keyframes(outerAnimation),
-    inner: keyframes(innerAnimation),
+    animation: keyframes(animation),
+    inverseAnimation: keyframes(inverseAnimation),
   };
 };
 
@@ -63,8 +63,8 @@ const Translate: React.FC<TranslateProps> = ({
   timingFunction = standard(),
 }: TranslateProps) => {
   let calculatedDuration: number;
-  let outerKeyframes: string;
-  let innerKeyframes: string;
+  let animation: string;
+  let inverseAnimation: string;
 
   return (
     <Collector
@@ -91,7 +91,7 @@ const Translate: React.FC<TranslateProps> = ({
                   )
                 : duration;
 
-            ({ outer: outerKeyframes, inner: innerKeyframes } = buildKeyframes(
+            ({ animation, inverseAnimation } = buildKeyframes(
               elements,
               calculatedDuration,
               timingFunction
@@ -109,19 +109,19 @@ const Translate: React.FC<TranslateProps> = ({
               style: prevStyle => ({
                 ...prevStyle,
                 ...common,
-                transform: combine(`translate3d(${translateToX}px, ${translateToY}px, 0)`)(
+                transform: combine(`translate3d(${translateToX}px, ${translateToY}px, 0)`, '')(
                   prevStyle.transform
                 ),
                 animationDuration: `${calculatedDuration}ms`,
-                animationName: combine(outerKeyframes)(prevStyle.animationName),
+                animationName: combine(animation)(prevStyle.animationName),
               }),
               className: () =>
                 css({
                   [`.${INVERSE_TRANSLATE_CLASS_NAME}`]: {
                     ...common,
                     transform: `translate3d(${inverseTranslateToX}px, ${inverseTranslateToY}px, 0)`,
                     animationDuration: `${calculatedDuration}ms`,
-                    animationName: `${innerKeyframes}`,
+                    animationName: inverseAnimation,
                   },
                 }),
             });