css - Angular 2动画在最后添加溢出属性

Question

我正在尝试实现滑入滑出动画，我有以下代码

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 ，并在最大化动画结束时将其移除？

谢谢

Answer 1

您可以使用附加到 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