configurable enter and leave transition easing curves; fix: #186

mseemann · Nov 8, 2016 · f119cc7 · f119cc7
1 parent a644411
commit f119cc7
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 4 deletions.
diff --git a/src/demo-app/app/dialog-declarative/dialog-declarative.component.html b/src/demo-app/app/dialog-declarative/dialog-declarative.component.html
@@ -250,18 +250,32 @@ <h5>Dialog configuration object</h5>
   </tr>
 
   <tr>
-    <td>enterTransitionDuration?: number;</td>
+    <td>enterTransitionDuration?: number</td>
     <td>
       Alter the the transition duration for the enter animation in ms. Defaults to 300ms.
     </td>
   </tr>
 
   <tr>
-    <td>leaveTransitionDuration?: number;</td>
+    <td>enterTransitionEasingCurve?: string</td>
+    <td>
+      The easing curve for the enter animation. defaults to cubic-bezier(0.0, 0.0, 0.2, 1)
+    </td>
+  </tr>
+
+  <tr>
+    <td>leaveTransitionDuration?: number</td>
     <td>
       Alter the the transition duration for the leave animation in ms. Defaults to 250ms.
     </td>
   </tr>
 
+  <tr>
+    <td>leaveTransitionEasingCurve?: string</td>
+    <td>
+      The easing curve for the leave animation. defaults to cubic-bezier(0.0, 0.0, 0.2, 1)
+    </td>
+  </tr>
+
   </tbody>
 </table>
diff --git a/src/lib/components/dialog/mdl-dialog-configuration.ts b/src/lib/components/dialog/mdl-dialog-configuration.ts
@@ -89,10 +89,20 @@ export interface IMdlDialogConfiguration {
    */
   enterTransitionDuration?: number;
 
+  /**
+   * The easing curve for the enter animation. defaults to cubic-bezier(0.0, 0.0, 0.2, 1)
+   */
+  enterTransitionEasingCurve?: string;
+
   /**
    * The curation for the leave animation in ms. defaults to 250ms
    */
   leaveTransitionDuration?: number;
+
+  /**
+   * The easing curve for the leave animation. defaults to cubic-bezier(0.0, 0.0, 0.2, 1)
+   */
+  leaveTransitionEasingCurve?: string;
 }
 
 /**

diff --git a/src/lib/components/dialog/mdl-dialog-host.component.ts b/src/lib/components/dialog/mdl-dialog-host.component.ts
@@ -23,6 +23,9 @@ import { InternalMdlDialogReference } from './internal-dialog-reference';
 const enterTransitionDuration = 300;
 const leaveTransitionDuration = 250;
 
+const enterTransitionEasingCurve = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
+const leaveTransitionEasingCurve = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
+
 // helper defintions - these classes are private in angular
 // but render.animate is public and uses theese defintions
 
@@ -176,7 +179,9 @@ export class MdlDialogHostComponent implements OnInit {
           {offset:0, styles: { styles: [this.showAnimationStartStyle]}},
           {offset:1, styles: { styles: [this.showStyle]}}
         ],
-        this.config.enterTransitionDuration || enterTransitionDuration, 0, 'cubic-bezier(0.0, 0.0, 0.2, 1)');
+        this.config.enterTransitionDuration || enterTransitionDuration,
+        0,
+        this.config.enterTransitionEasingCurve || enterTransitionEasingCurve);
 
       animation.onDone( () => {
         this.ngZone.run( () => {
@@ -200,7 +205,9 @@ export class MdlDialogHostComponent implements OnInit {
           {offset:0, styles: { styles: [this.showStyle]}},
           {offset:1, styles: { styles: [this.hideAnimationEndStyle]}}
         ],
-        this.config.leaveTransitionDuration || leaveTransitionDuration, 0, 'cubic-bezier(0.0, 0.0, 0.2, 1)');
+        this.config.leaveTransitionDuration || leaveTransitionDuration,
+        0,
+        this.config.leaveTransitionEasingCurve || leaveTransitionEasingCurve);
 
       animation.onDone( () => {
         this.ngZone.run( () => {