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

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..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^