Angular 4 animation for smooth sliding down

Question

Angular 4 animation for smooth sliding down

Attempting to add animation to my webpage has presented a challenge:
I have a content div on my page, along with a button that triggers the opening of another div above the content. My goal is to have this top div fade and slide into view while simultaneously having the content div slide down or up. Although I managed to create the desired animation for the div that appears upon clicking the button, I am unsure how to handle the content div as shown in the code snippet below:

<div class="wrapper">
  <button (click)="animated = !animated"></button>
  <div *ngIf="animated" [@slideInOutAnimation] class="animated-div">
  THIS DIV IS ANIMATED</div>

  <div class="content">THIS IS CONTENT DIV</div>

</div>

TYPESCRIPT:
animations: [
trigger('slideInOutAnimation', [

  state('*', style({

  })),
  transition(':enter', [
    style({
      transform: 'translateY(-10%)',
      opacity: 0
    }),
    animate('.5s ease-in-out', style({
      transform: 'translateY(0)',
      opacity: 1
    }))
  ]),
  transition(':leave', [
    animate('.5s ease-in-out', style({
      transform: 'translateY(-10%)',
      opacity: 0
    }))
  ])
])
]

Do I need to create an additional trigger to move my content div along with the animated one?

css angular angular-animations

Answer 1

Answer №1

To begin, make sure to establish a file where your animations are defined and exported. This will help clarify things in your app.component.ts

In this particular scenario, I have set the max-height of the div to transition from 0px (when hidden) to 500px. However, feel free to adjust this according to your specific requirements.

The animation utilizes states (in and out) that switch when the button is clicked, 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'
            }))
        ]
        )])
    ]),
]

Next, in your app.component, import the animation and create a method that toggles 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);
    }
  }
}

Here's what your app.component.html would resemble:

<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 corresponds to the animation trigger outlined in animations.ts

Check out this StackBlitz example I crafted: https://stackblitz.com/edit/angular-muvaqu

Just a quick note: If an error prompts you to include BrowserAnimationsModule, simply import it in your app.module.ts:

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

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

Answer 2

To begin, make sure to establish a file where your animations are defined and exported. This will help clarify things in your app.component.ts

In this particular scenario, I have set the max-height of the div to transition from 0px (when hidden) to 500px. However, feel free to adjust this according to your specific requirements.

The animation utilizes states (in and out) that switch when the button is clicked, 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'
            }))
        ]
        )])
    ]),
]

Next, in your app.component, import the animation and create a method that toggles 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);
    }
  }
}

Here's what your app.component.html would resemble:

<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 corresponds to the animation trigger outlined in animations.ts

Check out this StackBlitz example I crafted: https://stackblitz.com/edit/angular-muvaqu

Just a quick note: If an error prompts you to include BrowserAnimationsModule, simply import it in your app.module.ts:

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

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

Answer 3

Answer №2

When it comes to handling height transitions, I find the wildcard operator to be quite useful for accommodating dynamic content heights.

// Setting up transitions based on true/false states using 0 and 1 values

trigger('slideUpDown', [
  state('0', style({ 'max-height': '*', opacity: 1 })),
  state('1', style({ 'max-height': '0px', opacity: 0 })),
  transition(':enter', animate('400ms ease-in-out')),
  transition('* => *', animate('400ms ease-in-out')),
])

To implement this:

<div #someDiv [@slideUpDown]="someDiv.state"></div>

Elsewhere in your code or template, you can toggle the state with a button click.

<button (click)="someDiv.state = !someDiv.state"></button>

Answer 4

When it comes to handling height transitions, I find the wildcard operator to be quite useful for accommodating dynamic content heights.

// Setting up transitions based on true/false states using 0 and 1 values

trigger('slideUpDown', [
  state('0', style({ 'max-height': '*', opacity: 1 })),
  state('1', style({ 'max-height': '0px', opacity: 0 })),
  transition(':enter', animate('400ms ease-in-out')),
  transition('* => *', animate('400ms ease-in-out')),
])

To implement this:

<div #someDiv [@slideUpDown]="someDiv.state"></div>

Elsewhere in your code or template, you can toggle the state with a button click.

<button (click)="someDiv.state = !someDiv.state"></button>

Answer 5

Answer №3

If you want to add a smooth slide down animation in your Angular 2+ project, here's a simple and elegant way to do it.

animation.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 }))]),
    ]),
  ],
})

animation.component.html

<div @slideDownUp *ngIf="isVisible" class="box">
  This is the content within the div!
</div>

animation.component.scss

.box {
  overflow: hidden;
}

Answer 6

If you want to add a smooth slide down animation in your Angular 2+ project, here's a simple and elegant way to do it.

animation.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 }))]),
    ]),
  ],
})

animation.component.html

<div @slideDownUp *ngIf="isVisible" class="box">
  This is the content within the div!
</div>

animation.component.scss

.box {
  overflow: hidden;
}

Angular 4 animation for smooth sliding down

Answer №1

Answer №2

Answer №3

Similar questions

How can I align the navigation bar in the center using Bootstrap?

Is it permissible to utilize the ::Before::Before element?

Is it necessary for me to develop an Angular library in order to release a basic TypeScript class that makes use of Angular components?

Where should the transformation of server response data into a format that the component can interpret be done within the NgRx framework?

Count of elements in one flexbox row

The functionality of -moz-background-clip:text is not functioning properly on Firefox browsers

Blending a background image with CSS

Setting column heights and spacing in Bootstrap

Is there a way to repurpose a function to work with both ids and classes?

Although IE may have issues, @font-face is not functioning properly in Chrome and FireFox

Ways to clear an Angular form after a failed login attempt

The process of assigning a local variable to a JSON response in Angular 2

Steps for Adding a JSON Array into an Object in Angular

Creating smooth and natural movement of a div element using Javascript (rotating and moving)

Exploring HTML and CSS backgrounds

Access the Angular Universal application through a link without specifying a port number

The Ineffectiveness of Social Media Sharing in WordPress

Personalize the file button for uploading images

Choose the default value of the select tag if hardcoded options are used with ngModel

The misaligned navigation bar and distortion on mobile devices are causing issues with the website's layout