Xocoatzin Xocoatzin - 1 year ago 146
Javascript Question

How to execute code after Angular Material animations

I'm using Angular Material on a website. Being a responsive-framework, it handles rendering at different window-sizes. When changing the window size, it adds some animations of the layout changing and controls moving around

Example: https://material.angularjs.org/latest/demo/gridList (open the link and resize the window)

enter image description here

I have some WebGL canvas on the tiles shown on the example that need to be redrawn after the animation completes (and the container has it's final dimensions).

How can I get some

for the UI animations to be complete?

Answer Source

The solution for this problem, is to add the attribute md-on-layout to md-grid-list (docs).



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


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