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 {
    }
  • 相关阅读:
    关闭firefox的plugincheck
    C# 三个定时器区别
    数字图像处理学习 01 图像的几何变换
    C++ dll的创建和使用
    使用Log4Cplus+配置文件打印日志
    Bmp图像的数据格式及读取
    GCC的使用和Makefile的编写
    day03 QT学习 常用控件 QLabel QPushButton QLineEdit使用 QSS介绍以及QObject子对象的遍历
    day02 QT学习 字符集和中文乱码的问题
    day01 QT学习 信号槽和QWidget介绍
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7237395.html
Copyright © 2011-2022 走看看