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

Question

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

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

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

如何获得callback或promise UI动画完整？

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-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