fix(alert):修改alert动画

Yoshino-UI · Jun 23, 2018 · c5b4175 · c5b4175
1 parent 4bb5b6f
commit c5b4175
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git a/components/Alert/Alert.tsx b/components/Alert/Alert.tsx
@@ -70,14 +70,10 @@ export class Alert extends Component<IAlertProps, IAlertState> {
     const transitionStyles: {
       [index: string]: object;
     } = {
-      exiting: { opacity: 0},
-      exited: { opacity: 0 },
-    };
-    const duration = 500;
-    const defaultStyle = {
-      transition: `opacity ${duration}ms ease-in-out`,
-      opacity: 1,
+      exiting: { transform: 'scaleY(0.3)'},
+      exited: { display: 'none' },
     };
+    const duration = 200;
     const defaultIcon = {
       success: 'checkmark-circled',
       info: 'information-circled',
@@ -109,7 +105,6 @@ export class Alert extends Component<IAlertProps, IAlertState> {
               className={clsName}
               style={{
                 ...style,
-                ...defaultStyle,
                 ...transitionStyles[state],
               }}
               {...otherProps}

diff --git a/components/Alert/style/index.less b/components/Alert/style/index.less
@@ -10,7 +10,9 @@
   line-height: @line-height-base;
   margin-bottom: 10px;
   font-size: @font-size-base;
-  transition: @transition-base;
+  transition: @transition-slow;
+  transform: scaleY(1.0);
+  transform-origin: 50% 0%;
 
   p {
     margin: 0px;