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 {
    }
  • 相关阅读:
    HTML 5 全局属性
    微软build 2015
    写个程序登陆58同城
    工厂方法
    简单工厂
    System.Data.SQLite兼容32位和64位问题
    利用Socket实现的两个程序的通信
    最近的工作总结
    Canvas路径、描边、填充
    HTML5阴影与渐变
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7237395.html
Copyright © 2011-2022 走看看