Angular 4/5 AnimationOptions and Interfaces

AnimationOptions and Interfaces in Angular 4/5

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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions