python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

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