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 {
    }
  • 相关阅读:
    扩展JSON
    字符串格式化---- String.prototype.format
    HigntChats应用举例--报表
    django Form组件之解决数据无法动态显示之BUG----以博客园添加新随笔页为主
    报错:jquery3.1.1报错Uncaught TypeError: a.indexOf is not a function
    HDU 6166 Senior Pan(多校第九场 二进制分组最短路)
    HDU 6069 Counting Divisors(区间素数筛法)
    hdu 6058 Kanade's sum (计算贡献,思维)
    HDU 6052 To my boyfriend(容斥+单调栈)
    HDU 6041 I Curse Myself(点双联通加集合合并求前K大) 2017多校第一场
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7237395.html
Copyright © 2011-2022 走看看