src/components/dialog/dialog.js
function dialogPopIn(container, options) {
      // Add the `md-dialog-container` to the DOM
      options.parent.append(container);
      options.reverseContainerStretch = stretchDialogContainerToViewport(container, options);

      var dialogEl = container.find('md-dialog');
      var animator = $mdUtil.dom.animator;
      var buildTranslateToOrigin = animator.calculateZoomToOrigin;
      var translateOptions = {transitionInClass: 'md-transition-in', transitionOutClass: 'md-transition-out'};
      var from = animator.toTransformCss(buildTranslateToOrigin(dialogEl, options.openFrom || options.origin));
      var to = animator.toTransformCss("");  // defaults to center display (or parent or $rootElement)

      dialogEl.toggleClass('md-dialog-fullscreen', !!options.fullscreen);

      return animator
        .translate3d(dialogEl, from, to, translateOptions)
        .then(function(animateReversal) {

          // Build a reversal translate function synced to this translation...
          options.reverseAnimate = function() {
            delete options.reverseAnimate;

            if (options.closeTo) {
              // Using the opposite classes to create a close animation to the closeTo element
              translateOptions = {transitionInClass: 'md-transition-out', transitionOutClass: 'md-transition-in'};
              from = to;
              to = animator.toTransformCss(buildTranslateToOrigin(dialogEl, options.closeTo));

              return animator
                .translate3d(dialogEl, from, to,translateOptions);
            }

            return animateReversal(
              to = animator.toTransformCss(
                // in case the origin element has moved or is hidden,
                // let's recalculate the translateCSS
                buildTranslateToOrigin(dialogEl, options.origin)
              )
            );

          };

          // Function to revert the generated animation styles on the dialog element.
          // Useful when using a contentElement instead of a template.
          options.clearAnimate = function() {
            delete options.clearAnimate;

            // Remove the transition classes, added from $animateCSS, since those can't be removed
            // by reversely running the animator.
            dialogEl.removeClass([
              translateOptions.transitionOutClass,
              translateOptions.transitionInClass
            ].join(' '));

            // Run the animation reversely to remove the previous added animation styles.
            return animator.translate3d(dialogEl, to, animator.toTransformCss(''), {});
          };

          return true;
        });
    }
function dialogPopIn(container, options) {
      // Add the `md-dialog-container` to the DOM
      options.parent.append(container);
      options.reverseContainerStretch = stretchDialogContainerToViewport(container, options);

      var dialogEl = container.find('md-dialog');
      var animator = $mdUtil.dom.animator;
      var buildTranslateToOrigin = animator.calculateZoomToOrigin;
      var translateOptions = {transitionInClass: 'md-transition-in', transitionOutClass: 'md-transition-out'};
      var from = animator.toTransformCss(buildTranslateToOrigin(dialogEl, options.openFrom || options.origin));
      var to = animator.toTransformCss("");  // defaults to center display (or parent or $rootElement)

      dialogEl.toggleClass('md-dialog-fullscreen', !!options.fullscreen);

      return animator
        .translate3d(dialogEl, from, to, translateOptions)
        .then(function(animateReversal) {

          // Build a reversal translate function synced to this translation...
          options.reverseAnimate = function() {
            delete options.reverseAnimate;

            if (options.closeTo) {
              // Using the opposite classes to create a close animation to the closeTo element
              translateOptions = {transitionInClass: 'md-transition-out', transitionOutClass: 'md-transition-in'};
              from = to;
              to = animator.toTransformCss(buildTranslateToOrigin(dialogEl, options.closeTo));

              return animator
                .translate3d(dialogEl, from, to,translateOptions);
            }

            return animateReversal(
              to = animator.toTransformCss(
                // in case the origin element has moved or is hidden,
                // let's recalculate the translateCSS
                buildTranslateToOrigin(dialogEl, options.origin)
              )
            );

          };

          // Function to revert the generated animation styles on the dialog element.
          // Useful when using a contentElement instead of a template.
          options.clearAnimate = function() {
            delete options.clearAnimate;

            // Remove the transition classes, added from $animateCSS, since those can't be removed
            // by reversely running the animator.
            dialogEl.removeClass([
              translateOptions.transitionOutClass,
              translateOptions.transitionInClass
            ].join(' '));

            // Run the animation reversely to remove the previous added animation styles.
            return animator.translate3d(dialogEl, to, animator.toTransformCss(''), {});
          };

          return true;
        });
    }
function dialogPopIn ( container , options ) { // Add the `md-dialog-container` to the DOM options . parent . append ( container ) ; options . reverseContainerStretch = stretchDialogContainerToViewport ( container , options ) ; var dialogEl = container . find ( 'md-dialog' ) ; var animator = $mdUtil . dom . animator ; var buildTranslateToOrigin = animator . calculateZoomToOrigin ; var translateOptions = { transitionInClass : 'md-transition-in' , transitionOutClass : 'md-transition-out' } ; var from = animator . toTransformCss ( buildTranslateToOrigin ( dialogEl , options . openFrom || options . origin ) ) ; var to = animator . toTransformCss ( "" ) ; // defaults to center display (or parent or $rootElement) dialogEl . toggleClass ( 'md-dialog-fullscreen' , ! ! options . fullscreen ) ; return animator . translate3d ( dialogEl , from , to , translateOptions ) . then ( function ( animateReversal ) { // Build a reversal translate function synced to this translation... options . reverseAnimate = function ( ) { delete options . reverseAnimate ; if ( options . closeTo ) { // Using the opposite classes to create a close animation to the closeTo element translateOptions = { transitionInClass : 'md-transition-out' , transitionOutClass : 'md-transition-in' } ; from = to ; to = animator . toTransformCss ( buildTranslateToOrigin ( dialogEl , options . closeTo ) ) ; return animator . translate3d ( dialogEl , from , to , translateOptions ) ; } return animateReversal ( to = animator . toTransformCss ( // in case the origin element has moved or is hidden, // let's recalculate the translateCSS buildTranslateToOrigin ( dialogEl , options . origin ) ) ) ; } ; // Function to revert the generated animation styles on the dialog element. // Useful when using a contentElement instead of a template. options . clearAnimate = function ( ) { delete options . clearAnimate ; // Remove the transition classes, added from $animateCSS, since those can't be removed // by reversely running the animator. dialogEl . removeClass ( [ translateOptions . transitionOutClass , translateOptions . transitionInClass ] . join ( ' ' ) ) ; // Run the animation reversely to remove the previous added animation styles. return animator . translate3d ( dialogEl , to , animator . toTransformCss ( '' ) , { } ) ; } ; return true ; } ) ; }
Dialog open and pop-in animation
Dialog open and pop - in animation