如何在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