Angular 2 animation add overflow property on end

Question

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'))
        ])
    ]

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?

Thanks

abekonge · Accepted Answer · 2018-07-04 10:31:32Z

You can control this entirely in the animation definition by:

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'
}))

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' }))
  ]) 
)

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.

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.

Thank you the steps thing solved my similar issue. My scrollbar now appears at the very end.

micronyks · Accepted Answer · 2017-01-26 18:09:25Z

2

you can use start and end callback attached to angular2-animation

This example/below code is just for the reference purpose.

<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

EDIT: you can also use keyframe for your use case.

https://angular.io/docs/ts/latest/guide/animations.html#!#multi-step-animations-with-keyframes

edited Jan 26, 2017 at 18:09

answered Jan 26, 2017 at 17:41

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

3 Comments

keepwalking Over a year ago

I was thinking maybe i can do something in the animation definition and not use these events.

micronyks Over a year ago

I think keyframe will help you.

keepwalking Over a year ago

As far as i understood styles from transition will not be kept at the end of the animation. So using key frames it will work only during the animation. The overflow: hidden will be removed and the element will show again since height: 0 doesn't work unless overflow is hidden.

Collectives™ on Stack Overflow

Angular 2 animation add overflow property on end

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related