animations Animation III of Angular Exercise

Return to Directory

Preface

This article is based on an angular hands-on project. Article Directory
Last article animations in Angular Exercise II Entry and Exit animations, Keyframes series animation, Group parallel animation are practiced in this section.Practice animation callback functions, query selectors, and using animation in routing today.

Start Practice

callback

The callback method is also simple, as follows:

  <div *ngIf="Group" style="height: 100px;width: 100px;background-color: black; border-radius: 50px;"
       [@GroupAnimate]="boxState" (@GroupAnimate.done)="Callback(false)" (@GroupAnimate.start)="Callback(true)">
  </div>


  Callback(f:boolean){
    if(f){
      console.log("Animation Start");
    }else {
      console.log("End of Animation");
    }
  }

query

Usage and css selector are similar, query allows different elements to achieve different animation effects.

/*
query Selector Demo
 Approximately the same usage and css selector
 */
export const QueryAnimate = trigger('QueryAnimate',[
    transition('off=>on', [
      // Hide All First
      query('div', style({ opacity: 0 })),
      // Execute Animation Again
      query('.box-top', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateY(-400%)', offset: 0}),
        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
      ]) )),
      query('.box-center', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateX(-400%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
      ]) )),
      query('.box-foot', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateY(400%)', offset: 0}),
        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
      ]) )),
      query('h2', animate('500ms',keyframes([
        style({transform:'scale(0.5)'}),
        style({transform: 'scale(1)'})
      ]) )),
    ]),
    transition('on=>off', [
      query('.box-top', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateY(0)'}),
        style({opacity: 0, transform: 'translateY(-400%)'})
      ]) )),
      query('.box-center', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateX(0)'}),
        style({opacity: 0, transform: 'translateX(-400%)'})
      ]) )),
      query('.box-foot', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateY(0)'}),
        style({opacity: 0, transform: 'translateY(400%)'})
      ]) )),
      query('h2', animate('500ms',keyframes([
        style({transform:'scale(1)'}),
        style({transform: 'scale(0.5)'})
      ]) )),
    ])
  ]);

Source code

The source code is placed on the github open source community and will be updated at any time.So when you download the latest version, it will be slightly different from the description in this article.
github address: https://github.com/yiershan/Angular5-test

Tags: github angular

Posted on Sat, 09 May 2020 10:13:15 -0700 by CaptainStarbuck