如何在 Angular Material 动画之后执行代码答案

【问题标题】：How to execute code after Angular Material animations如何在 Angular Material 动画之后执行代码
【发布时间】：2016-09-02 01:59:58
【问题描述】：

我在一个网站上使用Angular Material。作为一个响应式框架，它可以处理不同窗口大小的渲染。当改变窗口大小时，它会添加一些布局变化和控件移动的动画

示例：https://material.angularjs.org/latest/demo/gridList（打开链接并调整窗口大小）

我在示例中显示的图块上有一些 WebGL 画布，需要在动画完成后重新绘制（并且容器具有它的最终尺寸）。

如何获得一些callback 或promise 以完成 UI 动画？

【问题讨论】：

标签： javascript angularjs animation frontend angular-material

【解决方案1】：

解决这个问题的方法，是在md-grid-list（docs）上添加属性md-on-layout。

例子：

HTML：

<md-grid-list md-on-layout="update($event)" ...>
  <md-grid-tile>...</md-grid-tile>
</md-grid-list>

控制器：

$scope.update = function($event){
    console.log("Updating layout."); 
}

【讨论】：

【解决方案2】：

您可以使用作为md-grid-list 指令的一部分指定的属性md-on-layout 将表达式 或函数传递给它。一旦您的布局更改，就会执行此操作。

指令使用

<md-grid-list md-cols-xs="1" 
  md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" 
  md-row-height-gt-md="1:1" md-row-height="2:2" 
  md-gutter="12px" md-gutter-gt-sm="8px" 
  md-on-layout="afterLayout()">
    <md-grid-tile class="gray" md-rowspan="3" md-colspan="2" md-colspan-sm="1" md-colspan-xs="1">
    <md-grid-tile-footer>
      <h3>#1: (3r x 2c)</h3>
    </md-grid-tile-footer>
  </md-grid-tile>

</md-grid-list>

控制器

$scope.afterLayout = function () {
  console.log("Layout complete");
}

我创建了一个代码笔，其实现在布局更改时执行console.log：http://codepen.io/anon/pen/ZWwmNw

【讨论】：