fix(Dialog): update dialog motion

Author: youluna

src/animate/scss/_fading-entrances/_fadeInUp.scss

@@ -1,14 +1,14 @@
 @include keyframes(fadeInUp) {
     0% {
         opacity: 0;
-        @include transform(translateY(20px));}
+        @include transform(translateY(24px));}
     100% {
         opacity: 1;
         @include transform(translateY(0));
     }
 }
 
-@mixin fadeInUp($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $ease-out-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
+@mixin fadeInUp($count: $countDefault, $duration: $motion-duration-standard-in, $delay: $delayDefault, $function: $motion-default, $fill: $fillDefault, $visibility: $visibilityDefault) {
     @include animation-name(fadeInUp);
     @include count($count);
     @include duration($duration);

src/animate/scss/_fading-exits/_fadeOutUp.scss

@@ -5,11 +5,11 @@
     }
     100% {
         opacity: 0;
-        @include transform(translateY(-100px));
+        @include transform(translateY(-24px));
     }
 }
 
-@mixin fadeOutUp($count: $countDefault, $duration: .2s, $delay: $delayDefault, $function: $ease-in-quint, $fill: $fillDefault, $visibility: $visibilityDefault) {
+@mixin fadeOutUp($count: $countDefault, $duration: $motion-duration-standard-out, $delay: $delayDefault, $function: $motion-default, $fill: $fillDefault, $visibility: $visibilityDefault) {
     @include animation-name(fadeOutUp);
     @include count($count);
     @include duration($duration);

src/animate/scss/variable.scss

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import "../../core/style/_motion.scss";
 
 // animate variables
 // --------------------------------------------------

src/core/style/_motion.scss

@@ -9,3 +9,9 @@ $motion-duration-immediately: 100ms;
 $motion-duration-standard: 300ms;
 $motion-duration-complex: 450ms;
 $motion-duration-continue: 600ms;
+
+$motion-default: cubic-bezier(.4, 0, .2, 1);
+// 进入类动画默认时长300ms
+$motion-duration-standard-in: 300ms;
+// 消失类动画默认时长250ms
+$motion-duration-standard-out: 250ms;

src/dialog/dialog.jsx

@@ -173,7 +173,7 @@ export default class Dialog extends Component {
         afterClose: noop,
         hasMask: true,
         animation: {
-            in: 'fadeInDown',
+            in: 'fadeInUp',
             out: 'fadeOutUp',
         },
         autoFocus: false,

src/dialog/main.scss

@@ -12,8 +12,6 @@
     box-shadow: $dialog-shadow;
     text-align: left;
     overflow: hidden;
-    animation-duration: $motion-duration-standard;
-    animation-timing-function: $motion-ease-in-out;
     max-width: 90%;
 
     &-header {

src/overlay/main.scss

@@ -14,7 +14,7 @@
         width: 100%;
         height: 100%;
         background-color: $color-calculate-mask-background;
-        transition: opacity $motion-duration-standard $motion-ease;
+        transition: opacity $motion-duration-standard $motion-default;
         opacity: 0;
     }