Angular (4, 5, 6, 7) - An easy guide to implementing slide in and out animations using ngIf

Question

Angular (4, 5, 6, 7) - An easy guide to implementing slide in and out animations using ngIf

How can you implement a basic sliding animation in Angular4 to show and hide a container element?

For example:

<div *ngIf="show">
    <!-- Content -->
</div>

Slide the content in (similar to jQuery's slideDown() method) from top to bottom when show becomes true.

Slide the content out smoothly with an ease-out effect when show becomes false.

angular typescript angular-animations

Answer 1

Answer №1

First we have some code, followed by an explanation. If you want more details, the official documentation can be found here.

import { trigger, transition, animate, style } from '@angular/animations'

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})

In your HTML template:

<div *ngIf="visible" [@slideInOut]>When the 'visible' value changes between true and false, this element will smoothly slide up and down.</div>

The angular animation concept may seem complex at first, but once you get the hang of it, it becomes straightforward and powerful.

Breaking down the animation in simpler terms:

We're calling this animation 'slideInOut'.
For adding the element (:enter), we perform the following actions:
->Initially shift the element 100% upwards (relative to itself) to make it appear off-screen.
->Then gradually animate the translateY value until it reaches 0%, where the element naturally belongs.
When removing the element, animate the translateY value (currently at 0) to -100% (off-screen).

Our chosen easing function is ease-in, taking 200 milliseconds – feel free to alter this according to your preferences.

Answer 2

First we have some code, followed by an explanation. If you want more details, the official documentation can be found here.

import { trigger, transition, animate, style } from '@angular/animations'

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})

In your HTML template:

<div *ngIf="visible" [@slideInOut]>When the 'visible' value changes between true and false, this element will smoothly slide up and down.</div>

The angular animation concept may seem complex at first, but once you get the hang of it, it becomes straightforward and powerful.

Breaking down the animation in simpler terms:

We're calling this animation 'slideInOut'.
For adding the element (:enter), we perform the following actions:
->Initially shift the element 100% upwards (relative to itself) to make it appear off-screen.
->Then gradually animate the translateY value until it reaches 0%, where the element naturally belongs.
When removing the element, animate the translateY value (currently at 0) to -100% (off-screen).

Our chosen easing function is ease-in, taking 200 milliseconds – feel free to alter this according to your preferences.

Answer 3

Answer №2

I provided a solution to a similar question previously, and here is one way to achieve it:

Start by creating a file where you define your animations and export them for clarity in your app.component.ts

In the example below, I set the max-height of the div to transition from 0px (when hidden) to 500px, but adjust as needed.

This animation utilizes states (in and out) which toggle upon clicking a button triggering the animation.

animations.ts

import { trigger, state, style, transition,
    animate, group, query, stagger, keyframes
} from '@angular/animations';

export const SlideInOutAnimation = [
    trigger('slideInOut', [
        state('in', style({
            'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
        })),
        state('out', style({
            'max-height': '0px', 'opacity': '0', 'visibility': 'hidden'
        })),
        transition('in => out', [group([
            animate('400ms ease-in-out', style({
                'opacity': '0'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '0px'
            })),
            animate('700ms ease-in-out', style({
                'visibility': 'hidden'
            }))
        ]
        )]),
        transition('out => in', [group([
            animate('1ms ease-in-out', style({
                'visibility': 'visible'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '500px'
            })),
            animate('800ms ease-in-out', style({
                'opacity': '1'
            }))
        ]
        )])
    ]),
]

In your app.component, import the above animation and create a method toggling the animation state.

app.component.ts

import { SlideInOutAnimation } from './animations';

@Component({
  ...
  animations: [SlideInOutAnimation]
})
export class AppComponent  {
  animationState = 'in';

  ...

  toggleShowDiv(divName: string) {
    if (divName === 'divA') {
      console.log(this.animationState);
      this.animationState = this.animationState === 'out' ? 'in' : 'out';
      console.log(this.animationState);
    }
  }
}

Your app.component.html should resemble the following:

<div class="wrapper">
  <button (click)="toggleShowDiv('divA')">TOGGLE DIV</button>
  <div [@slideInOut]="animationState" style="height: 100px; background-color: red;">
  THIS DIV IS ANIMATED</div>
  <div class="content">THIS IS CONTENT DIV</div>
</div>

slideInOut refers to the animation trigger specified in animations.ts

For reference, here is a StackBlitz demonstration:

To address any potential errors prompting you to add BrowserAnimationsModule, simply import it in your app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [ ..., BrowserAnimationsModule ],
  ...
})

Answer 4

I provided a solution to a similar question previously, and here is one way to achieve it:

Start by creating a file where you define your animations and export them for clarity in your app.component.ts

In the example below, I set the max-height of the div to transition from 0px (when hidden) to 500px, but adjust as needed.

This animation utilizes states (in and out) which toggle upon clicking a button triggering the animation.

animations.ts

import { trigger, state, style, transition,
    animate, group, query, stagger, keyframes
} from '@angular/animations';

export const SlideInOutAnimation = [
    trigger('slideInOut', [
        state('in', style({
            'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
        })),
        state('out', style({
            'max-height': '0px', 'opacity': '0', 'visibility': 'hidden'
        })),
        transition('in => out', [group([
            animate('400ms ease-in-out', style({
                'opacity': '0'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '0px'
            })),
            animate('700ms ease-in-out', style({
                'visibility': 'hidden'
            }))
        ]
        )]),
        transition('out => in', [group([
            animate('1ms ease-in-out', style({
                'visibility': 'visible'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '500px'
            })),
            animate('800ms ease-in-out', style({
                'opacity': '1'
            }))
        ]
        )])
    ]),
]

In your app.component, import the above animation and create a method toggling the animation state.

app.component.ts

import { SlideInOutAnimation } from './animations';

@Component({
  ...
  animations: [SlideInOutAnimation]
})
export class AppComponent  {
  animationState = 'in';

  ...

  toggleShowDiv(divName: string) {
    if (divName === 'divA') {
      console.log(this.animationState);
      this.animationState = this.animationState === 'out' ? 'in' : 'out';
      console.log(this.animationState);
    }
  }
}

Your app.component.html should resemble the following:

<div class="wrapper">
  <button (click)="toggleShowDiv('divA')">TOGGLE DIV</button>
  <div [@slideInOut]="animationState" style="height: 100px; background-color: red;">
  THIS DIV IS ANIMATED</div>
  <div class="content">THIS IS CONTENT DIV</div>
</div>

slideInOut refers to the animation trigger specified in animations.ts

For reference, here is a StackBlitz demonstration:

To address any potential errors prompting you to add BrowserAnimationsModule, simply import it in your app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [ ..., BrowserAnimationsModule ],
  ...
})

Answer 5

Answer №3

In response to the initial query, it is actually possible to achieve the desired outcome in Angular by simply adding a class to the DOM element when the show variable is true and handling the animation/transition through CSS.

The bare minimum Angular code required for this is as follows:

<div class="box-opener" (click)="show = !show">
    Open/close the box
</div>

<div class="box" [class.opened]="show">
    <!-- Content -->
</div>

To make this solution work, you will need to define CSS rules for the transition like so:

.box {
    background-color: #FFCC55;
    max-height: 0px;
    overflow-y: hidden;
    transition: ease-in-out 400ms max-height;
}

.box.opened {
    max-height: 500px;
    transition: ease-in-out 600ms max-height;
}

If you encounter compatibility issues with older browsers, don't forget to include vendor prefixes in the transition properties.

For an example demonstration, check out this link

Answer 6

In response to the initial query, it is actually possible to achieve the desired outcome in Angular by simply adding a class to the DOM element when the show variable is true and handling the animation/transition through CSS.

The bare minimum Angular code required for this is as follows:

<div class="box-opener" (click)="show = !show">
    Open/close the box
</div>

<div class="box" [class.opened]="show">
    <!-- Content -->
</div>

To make this solution work, you will need to define CSS rules for the transition like so:

.box {
    background-color: #FFCC55;
    max-height: 0px;
    overflow-y: hidden;
    transition: ease-in-out 400ms max-height;
}

.box.opened {
    max-height: 500px;
    transition: ease-in-out 600ms max-height;
}

If you encounter compatibility issues with older browsers, don't forget to include vendor prefixes in the transition properties.

For an example demonstration, check out this link

Answer 7

Answer №4

The top-voted solution does not incorporate a genuine slide in/out effect, for the following reasons:

There is no smooth transition for the height attribute. The element starts with 100% of its height at time zero, causing a sudden jump in the elements below.
During sliding out/up, the element uses translateY(-100%) and then abruptly vanishes, creating another disruption in the elements below it.

To achieve a proper slide in and slide out, consider the following implementation:

my-component.ts

import { animate, style, transition, trigger } from '@angular/animations';

@Component({
  ...
  animations: [
    trigger('slideDownUp', [
      transition(':enter', [style({ height: 0 }), animate(500)]),
      transition(':leave', [animate(500, style({ height: 0 }))]),
    ]),
  ],
})

my-component.html

<div @slideDownUp *ngIf="isShowing" class="box">
  I am the content of the div!
</div>

my-component.scss

.box {
  overflow: hidden;
}

Answer 8

The top-voted solution does not incorporate a genuine slide in/out effect, for the following reasons:

There is no smooth transition for the height attribute. The element starts with 100% of its height at time zero, causing a sudden jump in the elements below.
During sliding out/up, the element uses translateY(-100%) and then abruptly vanishes, creating another disruption in the elements below it.

To achieve a proper slide in and slide out, consider the following implementation:

my-component.ts

import { animate, style, transition, trigger } from '@angular/animations';

@Component({
  ...
  animations: [
    trigger('slideDownUp', [
      transition(':enter', [style({ height: 0 }), animate(500)]),
      transition(':leave', [animate(500, style({ height: 0 }))]),
    ]),
  ],
})

my-component.html

<div @slideDownUp *ngIf="isShowing" class="box">
  I am the content of the div!
</div>

my-component.scss

.box {
  overflow: hidden;
}

Angular (4, 5, 6, 7) - An easy guide to implementing slide in and out animations using ngIf

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using Angular to display asynchronous data with ngIf and observables

Is it feasible to trigger a selector element in Angular 2 upon clicking another element?

Exploring the most effective strategies for creating a brand-new type in TypeScript?

What advantages could learning ReactJS first give me before diving into NextJS?

Implementing Limited Results in Redis FT.SEARCH with TypeScript

How can an Angular 2 component detect a change in the URL?

Protractor enables horizontal scrolling for a Div element

Tips for creating a responsive swiper slider in an Angular project

Failing unit test for ngrx effect with { dispatch: false } setting and action returned by the effect

Using TypeScript to pass a callback function to labelFormatter in the legend of a Highcharts chart

Steps to trigger pipe activation in Angular when the model is updated:1. Execute the

How do I determine if a child component is in a dirty state within CanDeactivateGuard when dealing with multiple form tags?

When we mention TypeScript and CDK, we are actually talking about the very foundation

GitHub Actions causing build failure in Angular project exclusively

React Quill editor fails to render properly in React project

Proper method for typing the generics of DatePickerProps belonging to the DatePicker component in mui-x library

"Learn the process of distinguishing between a drop-down value and a selected value within a drop-down menu using angular2-multiselect

How to implement a reusable module with distinct routes in Angular

Updating a label dynamically in Angular

Error: The reference 'GetServerSideProps' is being incorrectly used as a type instead of a value. Perhaps you intended to use 'typeof GetServerSideProps' instead?