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添加到元素中，但我不想要溢出：隐藏最大化时因为弄乱了我的内容。我内心有一些绝对元素，因为隐藏了溢出而无法显示。

有什么方法可以在最小化状态动画开始时应用溢出隐藏，并在最大化动画结束时将其删除？

由于

Answer 1

您可以通过以下方式在动画定义中完全控制此操作：

1）在您的状态中定义所需的溢出设置：

feedback off

然后使用state( 'maximize', style({ height: '*', overflow: 'visible' // or e.g. 'inherit' })), state('minimize', style({ height: '0', overflow: 'hidden' }))为高度和溢出定义不同的计时功能。因为这样您可以对溢出属性使用group计时功能，以使其像定时切换一样工作：

steps()

请注意，在分步计时功能上设置transition( 'maximize => minimize', group([ animate('300ms ease-in', style({ height: 0 })), animate('300ms steps(1,start)', style({ overflow: 'hidden' })) ]) ), transition( 'minimize=> maximize', group([ animate('300ms ease-out', style({ height: '*' })), animate('300ms steps(1,end)', style({ overflow: 'visible' })) ]) )和end定义了何时为单个步骤设置目标样式。例如您要在动画开始后立即将start过渡设置为隐藏。

作为一种替代语法，您也可以使用角度动画关键帧语法来定义步骤。例如。 'maximize=> minimize'过渡可以这样写：

'maximize => minimize'

如先前的注释中所述，关键帧函数中定义的样式在动画结束时消失，但是由于在状态中设置了溢出，因此它们与动画结束后的样子一样。

Answer 2

您可以使用 angular2-animation 附加的开始和结束回调

此示例/以下代码仅供参考。

<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

Angular 2动画结尾添加溢出属性

2 个答案: