Angular 4 Slide Animation

Question

I am trying to animate my page but have the following problem:
I have a div content on my page and a button that opens another div above the content. I would like the div to disappear and slide inward, and the bottom rib lean down. I created the animation that I wanted for the div above, which opens on click, but I don’t understand what to do with the contents of the div, for example, the code 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 })) ]) ]) ] 

Should I create some other trigger that will move my div content with animated?

Answer 1

First create a file in which you define your animations and export them. To make this clearer in your app.component.ts

In the following example, I used the maximum div height, which goes from 0px (when it is hidden), to 500 pixels, but you will change it according to what you need.

This animation uses states (in and out) that will switch when we click on the button that will trigger 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' })) ] )]) ]), ] 

Then in your app.component we import the animation and create a method that will switch 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); } } } 

And here is what your app.component.html looks like:

 <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 an animation trigger defined in animations.ts

Here is an example of the StackBlitz that I created: https://stackblitz.com/edit/angular-muvaqu

Side note. If, when an error occurs, you are prompted to add a BrowserAnimationsModule, simply import it into your app.module.ts:

 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ ..., BrowserAnimationsModule ], ... }) 

Answer 2

I prefer to use the wildcard operator when working with height transitions to provide dynamic content height.

 // Bind to true/false states via 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')), ]) 

using:

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

anywhere else or in a template you can switch state.

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