[英]How to execute code after Angular Material animations
I'm using Angular Material on a website. 我在网站上使用Angular Material 。 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) 示例: https : //material.angularjs.org/latest/demo/gridList (打开链接并调整窗口大小)
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). 我在示例中显示的图块上有一些WebGL画布,动画完成后(容器具有最终尺寸)需要重新绘制。
How can I get some callback
or promise
for the UI animations to be complete? 如何获得
callback
或promise
UI动画完整?
The solution for this problem, is to add the attribute md-on-layout
to md-grid-list
( docs ). 解决此问题的方法是将属性
md-on-layout
到md-grid-list
( docs )。
Example: 例:
HTML : HTML :
<md-grid-list md-on-layout="update($event)" ...>
<md-grid-tile>...</md-grid-tile>
</md-grid-list>
Controller : 控制器 :
$scope.update = function($event){
console.log("Updating layout.");
}
You can use the attribute md-on-layout
specified as part of md-grid-list
directive to pass an expression or a function to it. 您可以使用在
md-grid-list
指令中指定的属性md-on-layout
来传递表达式或函数 。 This gets executed once your layout changes. 布局更改后,将执行此操作。
Directive use 指令使用
<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>
Controller 控制者
$scope.afterLayout = function () {
console.log("Layout complete");
}
I have created a codepen with the implementation which does a console.log
on layout change: http://codepen.io/anon/pen/ZWwmNw 我已经创建了一个代码笔,该代码笔的实现会进行
console.log
的布局更改: http ://codepen.io/anon/pen/ZWwmNw
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.