Angular 2动画在末尾添加溢出属性 [英] Angular 2 animation add overflow property on end

问题描述

我正在尝试制作动画的幻灯片，并且我有以下代码

I am trying to achieve a slide in out animation and i have the following code

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 ，但我不想出现溢出:最大化时隐藏，因为它弄乱了我的内容.我里面有一些绝对元素由于隐藏的溢出而无法显示.

In order for this to work i need to add overflow: hidden to the element but i don't want to have overflow: hidden when is maximized because is messing with my content. I have some absolute elements inside it that don't show because of the overflow hidden.

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

Is there a way to apply overflow hidden when the minimize state animation start and remove it when the maximize animation ends?

谢谢

推荐答案

您可以通过以下方式在动画定义中完全控制它:

You can control this entirely in the animation definition by:

1)在您的状态中定义所需的溢出设置:

1) Defining the desired overflow settings in your states:

state(
  'maximize', 
  style({
    height: '*',
    overflow: 'visible' // or e.g. 'inherit'
})),
state('minimize',
  style({
    height: '0',
    overflow: 'hidden'
}))

然后使用 group 为高度和溢出定义不同的计时功能.因为这样您可以对溢出属性使用 steps()计时功能，以使其像定时切换一样工作:

Then use group to define different timing functions for height and overflow. Because then you can use the steps() timing function for the overflow property, to make it work like a timed toggle:

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 =>您要在动画开始后立即将溢出"设置为隐藏".

Note that setting end and start on the steps timing function defines when the target style is set for the single step. For e.g. the 'maximize=> minimize' transition you want to set the overflow to hidden as soon as the animation starts.

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

As an alternative syntax you can use the angular animation keyframes syntax to define the steps as well. E.g. the 'maximize => minimize' transition can be written like this:

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

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

As noted in an earlier comment, the styles defined in the keyframe function disappears when the animation ends, but since overflow is set in the states, they are as we want them to be after the animations ends.

这篇关于Angular 2动画在末尾添加溢出属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！