What Is AnimationOptions in Angular 4 and 5?
The AnimationOptions is used to configure or override
options for each of the step based animation methods. These step based support various
animation methods that cab be see in the below example.
When options are provided, the delay value of an
animation can be changed and animation input parameters can be passed in to
change styling and timing data when an animation is started.
The Animation Options imported from @angular/animations
module and its looks like -
import { AnimationOptions } from '@angular/animations';
These DSL function looks like -
ü transition([...],
{ /* options */ })
ü sequence([...],
{ /* options */ })
ü group([...],
{ /* options */ })
ü query([...],
{ /* options */ })
ü animation([...],
{ /* options */ })
ü useAnimation([...],
{ /* options */ })
ü animateChild([...],
{ /* options */ })
Example as -
@Component({
animations: [
trigger('myAnimation',
[
transition('*
=> *', [ ...], { options..
})
])
]
})
AnimationOptions Interface - Its looks like
interface AnimationOptions {
//Members
delay?: number | string
params?: {
[name: string]: any;
}
}
AnimationOptions Child Interfaces - Its looks
like
ü AnimateChildOptions
ü AnimationQueryOptions
Example looks like -
//Control child animations
trigger('parent', [ style({ transform: 'translate(-100px)' }),
animate('500ms', style({ transform: 'translate(0px)' })),
query('@child', animateChild()) ]),
trigger('child', [ style({ opacity:0 }),
animate('0.5s', style({ opacity:1 })) ])
Animation Options and input Params – Its looks
like
import {animation, style, animate} from "@angular/animations";
//Animation Options and input Params.
transition('* => *',
[style({ opacity: 0 }),animate("{{ time
}}", style({ opacity: "{{ opacity }}" }), ],
{ time: "2s", opacity: "1" })
Reusable animations – Its looks like
import {animation, style, animate} from "@angular/animations";
export let fadeAnimation = animation([ style({ opacity: "{{ from }}" }),
animate("{{ time
}}", style({ opacity: "{{ to }}" })) ], { time: "2s" })
I hope you are enjoying with this post! Please share with you friends. Thank you!!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|