Implement an overflow property at the end of an Angular 2 animation

Question

Implement an overflow property at the end of an Angular 2 animation

To create a smooth slide in and out animation, I have implemented 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 animation to function correctly, I found that adding overflow: hidden to the element is necessary. However, having overflow: hidden when the element is maximized causes issues with the content display. Some absolute elements within it are not visible due to the overflow hidden property.

Is there a way to automatically apply overflow hidden when the minimize state animation begins and remove it once the maximize animation has finished?

Thank you

css angular animation

Answer 1

Answer №1

To completely control this situation, you can manage it within the animation definition by:

1) Setting the desired overflow configurations in your states:

state(
  'maximize', 
  style({
    height: '*',
    overflow: 'visible' // or any other value like 'inherit'
})),
state('minimize',
  style({
    height: '0',
    overflow: 'hidden'
}))

Next, utilize group to establish different timing functions for height and overflow. This allows you to employ the steps() timing function on the overflow property, creating a timed toggle effect:

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 specifying end and start on the steps timing function determines when the target style is applied for each step. For instance, in the 'maximize=> minimize' transition, you want to hide the overflow as soon as the animation begins.

An alternative syntax using the angular animation keyframes format can also be employed to define the steps. For example, the 'maximize => minimize' transition could look like this:

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

It's worth mentioning that styles defined in the keyframe function vanish once the animation concludes, but since overflow is set within the states, they will remain as intended after the animation finishes.

Answer 2

To completely control this situation, you can manage it within the animation definition by:

1) Setting the desired overflow configurations in your states:

state(
  'maximize', 
  style({
    height: '*',
    overflow: 'visible' // or any other value like 'inherit'
})),
state('minimize',
  style({
    height: '0',
    overflow: 'hidden'
}))

Next, utilize group to establish different timing functions for height and overflow. This allows you to employ the steps() timing function on the overflow property, creating a timed toggle effect:

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 specifying end and start on the steps timing function determines when the target style is applied for each step. For instance, in the 'maximize=> minimize' transition, you want to hide the overflow as soon as the animation begins.

An alternative syntax using the angular animation keyframes format can also be employed to define the steps. For example, the 'maximize => minimize' transition could look like this:

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

It's worth mentioning that styles defined in the keyframe function vanish once the animation concludes, but since overflow is set within the states, they will remain as intended after the animation finishes.

Answer 3

Answer №2

Implementing the start and end callback functions with angular2-animation is essential.

The code snippet below serves as a reference example:

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

For more detailed information on these animation callbacks, visit: https://angular.io/docs/ts/latest/guide/animations.html#!#animation-callbacks

UPDATE: Another option for your scenario is utilizing the keyframe feature.

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

Answer 4

Implementing the start and end callback functions with angular2-animation is essential.

The code snippet below serves as a reference example:

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

For more detailed information on these animation callbacks, visit: https://angular.io/docs/ts/latest/guide/animations.html#!#animation-callbacks

UPDATE: Another option for your scenario is utilizing the keyframe feature.

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

Implement an overflow property at the end of an Angular 2 animation

Answer №1

Answer №2

Similar questions

What could be the reason for the text covering the image on the larger breakpoint?

Is there a way to align this button vertically to the bottom of its container with Bootstrap 5?

Exploring the Comparison Between Angular RxJS Observables: Using takeUntil and unsubscribing via Subscription

Issue: The token is required in Angular 2 RC5 to proceed with the testing

Using CSS to create a silhouette of a PNG image

Styling with CSS3: positioning floating divs on top of a non-floated div

Error in Angular2: The provided parameters do not match any of the available function signatures

Implementing nested CSS styles with jQuery - a step-by-step guide!

Is there a way to target a child element for hover effect in CSS without affecting the parent element?

Anticipated request for spy navigation with path '/members' was expected, but unfortunately was not triggered

Align the text vertically in a Bootstrap button

Leveraging the p-steps module from PrimeNG for smaller screen sizes

Click event for jQuery horizontal accordion

Incorporating Angular module into the mean.io bundle

Unveil concealed information within a freshly enlarged container

The CORS policy is blocking access to the site from NodeJS, Firebase Functions, and Angular because the 'Access-Control-Allow-Origin' header is not present

Solve the error "Property 'container' of null is not accessible" in musickit.js while running an Angular application on a server

What is causing this error to appear in Next.js? The <link rel=preload> is showing an invalid value for `imagesrcset`

sophisticated HTML navigation bar

Is it advisable to specify data types for my JSON data in TypeScript?