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

Question

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

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

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

如何让UI动画完成一些callback或promise？

Answer 1

此问题的解决方案是将属性md-on-layout添加到md-grid-list（docs）。

示例：

<强> 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."); 
}

Answer 2

您可以使用md-on-layout指令中指定的属性md-grid-list将表达式或函数传递给它。布局更改后执行此操作。

使用指令

<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");
}

我已经使用实现创建了一个codepen，它在布局更改时执行了console.log：http://codepen.io/anon/pen/ZWwmNw