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

Question

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

示例：https://material.angularjs.org/latest/demo/gridList（打开 link 并调整 window 的大小）

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

如何获得一些 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 来传递 expression 或 function 到它。一旦您的布局发生变化，就会执行此操作。

指令使用

<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

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

How to execute code after Angular Material animations

javascript

animation

frontend

angularjs

angular-material