[Angular] FadeIn and FadeOut animation in Angular
To define an Angular Animation, we using DSL type of language. Means we are going to define few animations ('fadeIn', 'fadeOut').
Then we need to define something called 'transition', which use those animations. 'transition' defines from which state to which state, we should apply animation.
Last we need trigger to pick off the animation.
A little bit more coding needed and might not be easy to get the idea at once.
Remeber this
Trigger transitions to use animations to animate style
Read from 'Right' to 'Left', what we need is
- animation
- transitions
- trigger
1. Animations:
import {animation, style, animate, trigger, transition, useAnimation} from '@angular/animations'; /* * DSL * */ export const fadeIn = animation([ // start style({ opacity: 0, 'border-radius': '5px' }), // end animate( '1000ms', style({ opacity: 1, }) ) ]); export const fadeOut = animation( animate( '500ms', style({opacity: 0}) ) );
2. Transition:
/* * Transition * */ export const fadeInOut = trigger('fadeInOut', [ transition('void => *', useAnimation(fadeIn)), transition('* => void', useAnimation(fadeOut)) ]);
From 'void' means 'nothing..', the ui element might not in the DOM yet.
To '*' any state, we use fadeIn animation.
From 'any state' to 'void', we use fadeOut animation.
And we also define 'fadeInOut' trigger to use in HTML:
<au-modal [@fadeInOut] *auModalOpenOnClick="paymentModal" [body]="modalBody"> </au-modal>
To see it works, we need to add animations in component:
import { Component } from '@angular/core';
import {fadeInOut} from './animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [fadeInOut]
})
export class AppComponent {
title = 'app';
}
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {AppComponent} from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
....
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
相关文章
- [ngx-formly] Dynamically set Model Properties with Angular Formly Expressions
- [Angular + Unit Testing] Mock HTTP Requests made with Angular’s HttpClient in Unit Tests
- [Angular] Fetch non-JSON data by specifying HttpClient responseType in Angular
- [Angular] Create a ng-true-value and ng-false-value in Angular by controlValueAccessor
- [Angular] FadeIn and FadeOut animation in Angular
- [Angular] Omit relative path by set up in tsconfig.json
- [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword
- [Angular Directive] Build a Directive that Tracks User Events in a Service in Angular 2
- [Angular2 Form] Display Validation and Error Messaging in Angular 2
- [Angular 2] Generate and Render Angular 2 Template Elements in a Component
- [Angular 2] Factory Provider with dependencies
- [Angular 2] Using Two Reducers Together
- [Angular 2] Managing State in RxJS with StartWith and Scan
- [Angular 2] Using Pipes to Filter Data
- [AngularJS] Using Services in Angular Directives
- [Angular] In angular world and out angular world
- [Angular] Angular Search filter, built-in filters, ng-repeat
- [ngx-formly] Use 3rd party Form Controls with Angular Formly / Custom type
- [Angular] Lazy Load CSS at runtime with the Angular CLI
- [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular
- [Angular] Create a ng-true-value and ng-false-value in Angular by controlValueAccessor
- [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword
- [Angular] Observable.catch error handling in Angular
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular] In angular world and out angular world
- fragment in UI5 Smart Template and directive in Angular
- Angular应用启动时创建的injection token一览
- Angular rxjs里自定义operator的使用