feat(Transition): 新增 zoom, drop 过渡动画

fjc0k · Mar 19, 2019 · 10d0e38 · 10d0e38
1 parent d83f8e6
commit 10d0e38
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 6 deletions.
diff --git a/src/components/Transition/index.scss b/src/components/Transition/index.scss
@@ -3,7 +3,13 @@
 $prefix: m-transition;
 
 .#{$prefix} {
-  animation: ease both;
+  animation-timing-function: ease;
+  animation-fill-mode: both;
+
+  &__drop {
+    transform-origin: top center;
+    animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
+  }
 }
 
 @keyframes #{$prefix}__fadeEnter {
@@ -129,3 +135,47 @@ $prefix: m-transition;
     transform: translate3d(100%, 0, 0);
   }
 }
+
+@keyframes #{$prefix}__zoomEnter {
+  from {
+    transform: scale(0) translateZ(0);
+  }
+
+  to {
+    transform: scale(1) translateZ(0);
+  }
+}
+
+@keyframes #{$prefix}__zoomLeave {
+  from {
+    transform: scale(1) translateZ(0);
+  }
+
+  to {
+    transform: scale(0) translateZ(0);
+  }
+}
+
+@keyframes #{$prefix}__dropEnter {
+  from {
+    opacity: 0;
+    transform: scale(0) translateZ(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1) translateZ(0);
+  }
+}
+
+@keyframes #{$prefix}__dropLeave {
+  from {
+    opacity: 1;
+    transform: scale(1) translateZ(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0) translateZ(0);
+  }
+}
diff --git a/src/components/Transition/index.tsx b/src/components/Transition/index.tsx
@@ -36,7 +36,11 @@ export default class MTransition extends component({
       /** 左滑进入 */
       'slideLeft' |
       /** 右滑进入 */
-      'slideRight'
+      'slideRight' |
+      /** 缩放 */
+      'zoom' |
+      /** 掉落 */
+      'drop'
     ),
     /** 动画时长，单位: ms */
     duration: 300 as number,
@@ -82,13 +86,16 @@ export default class MTransition extends component({
   render() {
     const { name, duration, className } = this.props
     const { type, display } = this.state
-    const animation = `m-transition__${name}${type} ${duration}ms both`
+    const animationName = `m-transition__${name}${type}`
+    const animationDuration = `${duration}ms`
     return (
       <View
-        className={`m-transition ${className}`}
+        className={`m-transition m-transition__${name} ${className}`}
         style={{
-          WebkitAnimation: animation,
-          animation: animation,
+          WebkitAnimationName: animationName,
+          animationName: animationName,
+          WebkitAnimationDuration: animationDuration,
+          animationDuration: animationDuration,
           ...(display ? {} : { display: 'none' }),
         }}
         onAnimationEnd={this.handleAnimationEnd}>