zoukankan      html  css  js  c++  java
  • [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 

    1. animation
    2. transitions
    3. 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 {
    }
  • 相关阅读:
    ASP.NET程序中常用的三十三种代码[1]
    window.showModalDialog使用手册
    ASP函数详解
    ASP.NET程序中常用的三十三种代码[2]
    Session对象的清空
    Css不朽的经典—3D文字特效
    IIS6 ASP 0251超过响应缓冲区限制错误的解决方法
    ASP.NET程序中常用的三十三种代码[3]
    平面设计常用制作尺寸
    Work with a file upload and download controls2
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7237395.html
Copyright © 2011-2022 走看看