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 {
    }
  • 相关阅读:
    【转载】使用缓存的9个误区(上)
    .NET开发者必备的工具箱(转载)
    Java基础之反射(一)
    【干货转载】.NET中的六个重要概念:栈、堆、值类型、引用类型、装箱和拆箱
    CKEditor配置详解
    ASP.NET中IsPostBack的理解
    三层架构与设计模式思想部署企业级数据库业务系统开发
    AppDomain 详解(转)
    字符串基础总结
    访问数据库的时候报错 尝试读取或写入受保护的内存。这通常指示其他内存已损坏。
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7237395.html
Copyright © 2011-2022 走看看