Animate In Angularjs Example

Animate In Angularjs Example

animate is an animation-specific function that is designed to be used inside of Angular's animation DSL language. If this information is new, please navigate to the component animations metadata page to gain a better understanding of how animations in Angular are used.

The animate function accepts two input parameters: timing and styles:

• timing is a string based value that can be a combination of a duration with optional delay and easing values. The format for the expression breaks down to duration delay easing (therefore a value such as 1s 100ms ease-out will be parse itself into duration=1000, delay=100, easing=ease-out. If a numeric value is provided then that will be used as the duration value in millisecond form.
• styles is the style input data which can either be a call to style or keyframes. 

// various functions for specifying timing data

animate(500, style(...))

animate("1s", style(...))

animate("100ms 0.5s", style(...))

animate("5s ease", style(...))

animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...))

// either style() of keyframes() can be used

animate(500, style({ background: "red" }))

animate(500, keyframes([

style({ background: "blue" })),

style({ background: "red" }))

])

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

import {Component, NgModule} from '@angular/core';

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

@Component({

selector: 'example-app',

styles: [`

.toggle-container {

background-color:white;

border:10px solid black;

width:200px;

text-align:center;

line-height:100px;

font-size:50px;

box-sizing:border-box;

overflow:hidden;

}

`],

animations: [trigger(

'openClose',

[

state('collapsed, void', style({height: '0px', color: 'maroon', borderColor: 'maroon'})),

state('expanded', style({height: '*', borderColor: 'green', color: 'green'})),

transition(

'collapsed <=> expanded', [animate(500, style({height: '250px'})), animate(500)])

])],

template: `

<button (click)="expand()">Open</button>

<button (click)="collapse()">Closed</button>

<hr />

<div class="toggle-container" [@openClose]="stateExpression">

Look at this box

</div>

`

})

export class MyExpandoCmp {

stateExpression: string;

constructor() { this.collapse(); }

expand() { this.stateExpression = 'expanded'; }

collapse() { this.stateExpression = 'collapsed'; }

}

@NgModule(

{imports: [BrowserAnimationsModule], declarations: [MyExpandoCmp], bootstrap: [MyExpandoCmp]})

export class AppModule {

}

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Mariano

I'm Ethan Mariano a software engineer by profession and reader/writter by passion.I have good understanding and knowledge of AngularJS, Database, javascript, web development, digital marketing and exploring other technologies related to Software development.