Toast Animation Doesn't Work with Custom Templates in rc7+

[willkramer]

After upgrading to rc7, v1, or v1.0.3 the animations on a custom toast item no longer display - there are no slide down or slide up animations. The custom toast will fade in (not a slide down) but it won't fade out; it is just removed from the DOM.

$mdToast.show({
    controller: 'toastCtrl',
    controllerAs: 'tc',
    templateUrl: '/partials/toast.html',
    autoWrap: false,
    hideDelay: 5000,
    position: 'top right'
});

The HTML is:

<md-toast layout="row" layout-align="center center" class="avu-toast">
  <div flex class="avu-toast-icon"></div><span flex>{{ ::tc.message }}</span>
  <md-icon aria-label="Close" md-svg-icon="nav:close" ng-click="tc.closeToast()"></md-icon>
</md-toast>

[devversion]

In general, Custom Templates are working.. including Slide Down / Up. https://material.angularjs.org/HEAD/demo/toast

It may be related to your template or your show configuration. Changing autoWrap to true, will fix the issue.

This is because we need to wrap the content of the template inside <div class="md-toast-content"> which is the children of the actual <md-toast>. Like this:

<md-toast>
  <div class="md-toast-content">
     CONTENT
  </div>
</md-toast>

The actual animation / transition will only run if you use .md-toast-content. See more details here

[willkramer]

@DevVersion Thanks for the help. Adding in the md-toast-content wrapper fixed the issue.