wip: configurable enter and leave transition times

mseemann · Nov 8, 2016 · 956dfa2 · 956dfa2
1 parent 3f0112a
commit 956dfa2
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 6 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
@@ -102,7 +102,9 @@ <h5>A custom Dialog - template</h5>
               clickOutsideToClose: true,
               styles:{'width': '350px'},
               isModal: true,
-              openFrom: editUserButton }"
+              openFrom: editUserButton,
+              enterTransitionDuration: 400,
+              leaveTransitionDuration: 400}"
             (show)="onDialogShow($event)"
             (hide)="onDialogHide()">
   <h3 class="mdl-dialog__title">Edit User</h3>
@@ -125,7 +127,9 @@ <h3 class="mdl-dialog__title">Edit User</h3>
               clickOutsideToClose: true,
               styles:{'width': '300px'},
               isModal:true,
-              openFrom: editUserButton}"
+              openFrom: editUserButton,
+              enterTransitionDuration: 400,
+              leaveTransitionDuration: 400}"
             (show)="onDialogShow(dialogRef)"
             (hide)="onDialogHide()">
   <h3 class="mdl-dialog__title">Edit User</h3>
@@ -244,5 +248,20 @@ <h5>Dialog configuration object</h5>
       to create the end point and end size of the dialog animation.
     </td>
   </tr>
+
+  <tr>
+    <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>
+      Alter the the transition duration for the leave animation in ms. Defaults to 250ms.
+    </td>
+  </tr>
+
   </tbody>
 </table>
diff --git a/src/demo-app/app/dialog/dialog.component.html b/src/demo-app/app/dialog/dialog.component.html
@@ -186,7 +186,9 @@ <h4>Open the dialog</h4>
       providers: [{provide: TEST_VALUE, useValue: 'Just an example'}],
       isModal: true,
       styles: {'width': '350px'},
-      clickOutsideToClose: true
+      clickOutsideToClose: true,
+      enterTransitionDuration: 400,
+      leaveTransitionDuration: 400
     });
     pDialog.then( (dialogReference: MdlDialogReference) => {
       console.log('dialog visible', dialogReference);

diff --git a/src/demo-app/app/dialog/dialog.component.ts b/src/demo-app/app/dialog/dialog.component.ts
@@ -106,7 +106,9 @@ export class DialogDemo extends AbstractDemoComponent {
       isModal: true,
       styles: {'width': '300px'},
       clickOutsideToClose: true,
-      openFrom: $event
+      openFrom: $event,
+      enterTransitionDuration: 400,
+      leaveTransitionDuration: 400
     });
     pDialog.subscribe( (dialogReference: MdlDialogReference) => {
       console.log('dialog visible', dialogReference);

diff --git a/src/lib/components/dialog/mdl-dialog-configuration.ts b/src/lib/components/dialog/mdl-dialog-configuration.ts
@@ -83,6 +83,16 @@ export interface IMdlDialogConfiguration {
    */
   closeTo?: MdlButtonComponent | MouseEvent | IOpenCloseRect;
 
+
+  /**
+   * The curation for the enter animation in ms. defaults to 300ms
+   */
+  enterTransitionDuration?: number;
+
+  /**
+   * The curation for the leave animation in ms. defaults to 250ms
+   */
+  leaveTransitionDuration?: number;
 }
 
 /**

diff --git a/src/lib/components/dialog/mdl-dialog-host.component.ts b/src/lib/components/dialog/mdl-dialog-host.component.ts
@@ -176,7 +176,7 @@ export class MdlDialogHostComponent implements OnInit {
           {offset:0, styles: { styles: [this.showAnimationStartStyle]}},
           {offset:1, styles: { styles: [this.showStyle]}}
         ],
-        enterTransitionDuration, 0, 'cubic-bezier(0.0, 0.0, 0.2, 1)');
+        this.config.enterTransitionDuration || enterTransitionDuration, 0, 'cubic-bezier(0.0, 0.0, 0.2, 1)');
 
       animation.onDone( () => {
         this.ngZone.run( () => {
@@ -200,7 +200,7 @@ export class MdlDialogHostComponent implements OnInit {
           {offset:0, styles: { styles: [this.showStyle]}},
           {offset:1, styles: { styles: [this.hideAnimationEndStyle]}}
         ],
-        leaveTransitionDuration, 0, 'cubic-bezier(0.0, 0.0, 0.2, 1)');
+        this.config.leaveTransitionDuration || leaveTransitionDuration, 0, 'cubic-bezier(0.0, 0.0, 0.2, 1)');
 
       animation.onDone( () => {
         this.ngZone.run( () => {