How to create animations with Angular 3? Here are the details of creating animations with angularjs

This article is an exercise article to consolidate your learning results. Now let’s try animation three in angularjs and see the effect. Let's take a look at it together

This is the preface

This article is a hands-on practice project based on angular. Article Directory
In the previous article "Angular Practice Animations 2", we practiced entry and exit animations, Keyframes to implement series animation, and Group to implement parallel animation. Today we practice animation callback functions and query selectors.

Start practicing

Callback function

(If you want to see more, go to the PHP Chinese websiteAngularJS Development Manual to learn)

The callback method is also very simple, as follows:

  <p>
  </p>


  Callback(f:boolean){
    if(f){
      console.log("动画开始");
    }else {
      console.log("动画结束");
    }
  }

##query

The usage is roughly the same as the css selector , through query, different elements can achieve different animation effects.

/*
query选择器演示
用法和css选择器大致相同
 */
export const QueryAnimate = trigger('QueryAnimate',[
    transition('off=>on', [
      // 先全部隐藏
      query('p', style({ opacity: 0 })),
      // 再执行动画
      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. Therefore, when you download the latest version, it will be slightly different from what is described in the article. Github address: https://github.com/yiershan/A...

Okay, this article ends here (if you want to see more, go to the PHP Chinese website

AngularJS User Manual 中文), if you have any questions, you can leave a message below.

The above is the detailed content of How to create animations with Angular 3? Here are the details of creating animations with angularjs. For more information, please follow other related articles on the PHP Chinese website!