add Rotating exits animations & refine Bouncing exits animations

wellyshen · Jun 27, 2020 · f109d31 · f109d31
1 parent 20f26ac
commit f109d31
Show file tree

Hide file tree

Showing 12 changed files with 69 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -434,6 +434,14 @@ const { ref } = useWebAnimations({
 - rotateInDownRight
 - rotateInUpLeft
 - rotateInUpRight
+
+#### Rotating exits
+
+- rotateOut
+- rotateOutDownLeft
+- rotateOutDownRight
+- rotateOutUpLeft
+- rotateOutUpRight
 </details>
 
 ## Use Your Own `ref`

diff --git a/demo/Animations/index.tsx b/demo/Animations/index.tsx
@@ -135,6 +135,13 @@ const Animations: FC = () => {
           <option value="rotateInUpLeft">rotateInUpLeft</option>
           <option value="rotateInUpRight">rotateInUpRight</option>
         </optgroup>
+        <optgroup label="Rotating exits">
+          <option value="rotateOut">rotateOut</option>
+          <option value="rotateOutDownLeft">rotateOutDownLeft</option>
+          <option value="rotateOutDownRight">rotateOutDownRight</option>
+          <option value="rotateOutUpLeft">rotateOutUpLeft</option>
+          <option value="rotateOutUpRight">rotateOutUpRight</option>
+        </optgroup>
       </select>
     </div>
   );

diff --git a/src/animations/bounceOutDown.ts b/src/animations/bounceOutDown.ts
@@ -2,11 +2,7 @@ const frame = { transform: "translate3d(0, -20px, 0) scaleY(0.9)", opacity: 1 };
 
 export default {
   keyframes: [
-    {
-      transform: "translate3d(0, 0, 0) scaleY(1)",
-      opacity: 1,
-      offset: 0,
-    },
+    { transform: "translate3d(0, 0, 0)", opacity: 1, offset: 0 },
     { transform: "translate3d(0, 10px, 0) scaleY(0.985)", offset: 0.2 },
     { ...frame, offset: 0.4 },
     { ...frame, offset: 0.45 },

diff --git a/src/animations/bounceOutLeft.ts b/src/animations/bounceOutLeft.ts
@@ -1,10 +1,6 @@
 export default {
   keyframes: [
-    {
-      transform: "translate3d(0, 0, 0) scaleX(1)",
-      opacity: 1,
-      offset: 0,
-    },
+    { transform: "translate3d(0, 0, 0)", opacity: 1, offset: 0 },
     {
       transform: "translate3d(20px, 0, 0) scaleX(0.9)",
       opacity: 1,

diff --git a/src/animations/bounceOutRight.ts b/src/animations/bounceOutRight.ts
@@ -1,10 +1,6 @@
 export default {
   keyframes: [
-    {
-      transform: "translate3d(0, 0, 0) scaleX(1)",
-      opacity: 1,
-      offset: 0,
-    },
+    { transform: "translate3d(0, 0, 0)", opacity: 1, offset: 0 },
     {
       transform: "translate3d(-20px, 0, 0) scaleX(0.9)",
       opacity: 1,

diff --git a/src/animations/bounceOutUp.ts b/src/animations/bounceOutUp.ts
@@ -2,11 +2,7 @@ const frame = { transform: "translate3d(0, 20px, 0) scaleY(0.9)", opacity: 1 };
 
 export default {
   keyframes: [
-    {
-      transform: "translate3d(0, 0, 0) scaleY(1)",
-      opacity: 1,
-      offset: 0,
-    },
+    { transform: "translate3d(0, 0, 0)", opacity: 1, offset: 0 },
     { transform: "translate3d(0, -10px, 0) scaleY(0.985)", offset: 0.2 },
     { ...frame, offset: 0.4 },
     { ...frame, offset: 0.45 },

diff --git a/src/animations/index.ts b/src/animations/index.ts
@@ -68,3 +68,8 @@ export { default as rotateInDownLeft } from "./rotateInDownLeft";
 export { default as rotateInDownRight } from "./rotateInDownRight";
 export { default as rotateInUpLeft } from "./rotateInUpLeft";
 export { default as rotateInUpRight } from "./rotateInUpRight";
+export { default as rotateOut } from "./rotateOut";
+export { default as rotateOutDownLeft } from "./rotateOutDownLeft";
+export { default as rotateOutDownRight } from "./rotateOutDownRight";
+export { default as rotateOutUpLeft } from "./rotateOutUpLeft";
+export { default as rotateOutUpRight } from "./rotateOutUpRight";
diff --git a/src/animations/rotateOut.ts b/src/animations/rotateOut.ts
@@ -0,0 +1,9 @@
+const transformOrigin = "center";
+
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1, transformOrigin },
+    { transform: "rotate3d(0, 0, 1, 200deg)", opacity: 0, transformOrigin },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};
diff --git a/src/animations/rotateOutDownLeft.ts b/src/animations/rotateOutDownLeft.ts
@@ -0,0 +1,9 @@
+const transformOrigin = "left bottom";
+
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1, transformOrigin },
+    { transform: "rotate3d(0, 0, 1, 45deg)", opacity: 0, transformOrigin },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};
diff --git a/src/animations/rotateOutDownRight.ts b/src/animations/rotateOutDownRight.ts
@@ -0,0 +1,9 @@
+const transformOrigin = "right bottom";
+
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1, transformOrigin },
+    { transform: "rotate3d(0, 0, 1, -45deg)", opacity: 0, transformOrigin },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};
diff --git a/src/animations/rotateOutUpLeft.ts b/src/animations/rotateOutUpLeft.ts
@@ -0,0 +1,9 @@
+const transformOrigin = "left bottom";
+
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1, transformOrigin },
+    { transform: "rotate3d(0, 0, 1, -45deg)", opacity: 0, transformOrigin },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};
diff --git a/src/animations/rotateOutUpRight.ts b/src/animations/rotateOutUpRight.ts
@@ -0,0 +1,9 @@
+const transformOrigin = "right bottom";
+
+export default {
+  keyframes: [
+    { transform: "translate3d(0, 0, 0)", opacity: 1, transformOrigin },
+    { transform: "rotate3d(0, 0, 1, 90deg)", opacity: 0, transformOrigin },
+  ],
+  timing: { duration: 1000, fill: "both" },
+};