Css Angular 2动画结束时添加溢出属性_Css_Angular_Animation

Css Angular 2动画结束时添加溢出属性

css angular animation

Css Angular 2动画结束时添加溢出属性,css,angular,animation,Css,Angular,Animation,我正在尝试实现滑入滑出动画，我有以下代码 animations: [ trigger('assignState', [ state('maximize', style({ height: '*', })), state('minimize', style({ height: '0' })), t

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

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，因为它会干扰我的内容。我有一些绝对元素在里面，因为溢出隐藏而没有显示

有没有办法在最小化状态动画开始时应用隐藏溢出，并在最大化动画结束时将其删除

谢谢

您可以使用开始和结束回调，该回调附加到angular2动画

下面的示例代码仅供参考

<ul>
    <li *ngFor="let hero of heroes"
        (@flyInOut.start)="animationStarted($event)"
        (@flyInOut.done)="animationDone($event)"
        [@flyInOut]="'in'">
      {{hero.name}}
    </li>
  </ul>



{{hero.name}

编辑：您还可以针对您的用例使用关键帧

您可以使用开始和结束连接到angular2动画的回调

下面的示例代码仅供参考

<ul>
    <li *ngFor="let hero of heroes"
        (@flyInOut.start)="animationStarted($event)"
        (@flyInOut.done)="animationDone($event)"
        [@flyInOut]="'in'">
      {{hero.name}}
    </li>
  </ul>



{{hero.name}

编辑：您还可以针对您的用例使用关键帧

您可以通过以下方式在动画定义中完全控制这一点：

1）在您的州定义所需的溢出设置：

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'

转换可以这样写：

transition(
  'maximize => minimize',
  group([
    animate('300ms ease-in', style({ height: 0 })),
    animate(
      '300ms', 
      keyframes([
        style({overflow: hidden}),
        style({overflow: hidden})
      ])  
    )
  ])
)

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