我正在尝试实现滑入滑出动画,我有以下代码
animations: [
trigger('assignState', [
state('maximize', style({
height: '*',
})),
state('minimize', style({
height: '0'
})),
transition('maximize => minimize', animate('300ms ease-in')),
transition('minimize => maximize', animate('300ms ease-out'))
])
]
为了使其正常工作,我需要将 overflow: hidden
添加到元素中,但我不想在最大化时出现 overflow: hidden,因为这会弄乱我的内容。我里面有一些绝对元素,由于隐藏了溢出而没有显示。
有没有一种方法可以在最小化状态动画开始时 overflow hidden ,并在最大化动画结束时将其移除?
谢谢
最佳答案
您可以使用附加到 angular2-animation 的 start 和 end 回调
此示例/以下代码仅供引用。
<ul>
<li *ngFor="let hero of heroes"
(@flyInOut.start)="animationStarted($event)"
(@flyInOut.done)="animationDone($event)"
[@flyInOut]="'in'">
{{hero.name}}
</li>
</ul>
https://angular.io/docs/ts/latest/guide/animations.html#!#animation-callbacks
编辑:您还可以针对您的用例使用keyframe
。
https://angular.io/docs/ts/latest/guide/animations.html#!#multi-step-animations-with-keyframes
关于css - Angular 2动画在最后添加溢出属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41879451/