chore: adjust dmeo app

wellyshen · Jun 22, 2020 · 02f3705 · 02f3705
1 parent d02478f
commit 02f3705
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/demo/App/index.tsx b/demo/App/index.tsx
@@ -13,14 +13,14 @@ import {
   text,
   heart,
   btn,
+  progress,
 } from "./styles";
 import useWebAnimations from "../../src";
 
 const App: FC = () => {
   const { ref: blockRef, getAnimation: getBlockAnim } = useWebAnimations<
     HTMLDivElement
   >({
-    autoPlay: false,
     keyframes: { width: ["0", "100%", "0"], left: ["0", "0", "100%"] },
     timing: {
       duration: 2000,
@@ -31,7 +31,6 @@ const App: FC = () => {
   const { ref: textRef, getAnimation: getTextAnim } = useWebAnimations<
     HTMLDivElement
   >({
-    autoPlay: false,
     keyframes: { opacity: ["0", "1"] },
     timing: {
       delay: 1600,
@@ -42,7 +41,6 @@ const App: FC = () => {
   const { ref: heartRef, getAnimation: getHeartAnim } = useWebAnimations<
     HTMLDivElement
   >({
-    autoPlay: false,
     keyframes: [
       { transform: "translate3d(0, 0, 0)", opacity: 1 },
       { transform: "translate3d(0, -130%, 0)", opacity: 0.5 },
@@ -57,9 +55,10 @@ const App: FC = () => {
   });
 
   const handlePlayback = (e: MouseEvent) => {
-    (getBlockAnim() as any)[(e.target as HTMLButtonElement).id]();
-    (getTextAnim() as any)[(e.target as HTMLButtonElement).id]();
-    (getHeartAnim() as any)[(e.target as HTMLButtonElement).id]();
+    const method = (e.target as HTMLButtonElement).id;
+    (getBlockAnim() as any)[method]();
+    (getTextAnim() as any)[method]();
+    (getHeartAnim() as any)[method]();
   };
 
   return (

diff --git a/demo/App/styles.ts b/demo/App/styles.ts
@@ -15,7 +15,7 @@ export const container = css`
   flex-direction: column;
   align-items: center;
   height: 100vh;
-  padding: 5rem 5%;
+  padding: 0 5%;
   color: #fff;
   background: #000;
   ${sm} {
@@ -33,7 +33,7 @@ export const container = css`
 `;
 
 export const title = css`
-  margin: 0 0 0.75rem;
+  margin: 5rem 0 0.75rem;
   text-align: center;
 `;
 
@@ -45,7 +45,8 @@ export const mask = css`
   position: relative;
   margin-bottom: 2.5rem;
   width: 87vw;
-  overflow-x: hidden;
+  overflow: hidden;
+  user-select: none;
   ${md} {
     width: 29rem;
   }