preface

Transition animation is essential in modern development. Rigidity and coolness are closely related to it.

The API associated with ng2.x animation is merge@angular/coreThe core module became independent after Angular4

However, there is not much difference in writing, only the introduction has changed.

Introduction to Angular2 + transition animation

Angular Animations are built based on the standard Web Animations API,

This API is relatively new and Can only be supported by newer browsers (see below): Can I Use: Web Animations API

Css2.1&3 is essentially cSS2.1&3, but in apI-wrapped objects, that is, cSS3 must have good fundamentals!!

Theory of transition animation

In general, there are several points

  1. Animation transitions are used between transitions, and transitions can be customized
  2. The default transitions include the following (state styles can take effect by passing the corresponding state value)
    • inactive= >active: To be activated
    • void => *: enter the field, can also be written as:enter , *Is to match any animation state,* = > *Transitions will not trigger
    • * => voidLeave the field:leave.voidIs the special state that represents the element before it is attached to the view

In actual combat

Here is a simple fade transition to demonstrate, as shown in the figure below

Gradually the modern code

import {
  trigger, // Animation encapsulates trigger, external trigger
  state, // Transition state control
  style, // Write basic styles
  transition, // Transition to cSS3
  animate, Animations for CSS3
  keyframes // CSS3 keyframes are used to implement cSS3 keyframes
} from '@angular/animations';


export const fadeIn = trigger('fadeIn', [
  state('in', style({ display: 'none' })), // The default element is not expanded
  transition('void => *'[// Enter animation
    animate(200, keyframes([
      style({ height: '0', opacity: 0, offset: 0 }), // Element height is 0, element hide (opacity is 0), animation frame is 0%
      style({ height: The '*', opacity: 1, offset: 1 }) // After 200ms, highly adaptive expansion, element expansion (transparency 1), animation frame at 100%
    ]))
  ]),
  transition('* => void', [
    animate(200, keyframes([
      style({ height: The '*', opacity: 1, offset: 0 }), // Accordingly, make the element transition from show to hide
      style({ height: '0', opacity: 0, offset: 1})))),]);Copy the code

How to use animation?

The usage is very simple, can be called within the component; There are two kinds;

  1. inanimationsWrite directly in the realization of animation,animationsIt accepts an array
  2. Package good introduction = “recommended

components.ts

// This is the form 2; I am the animation effect independent package to the corresponding TS file, convenient reuse
import { fadeIn } from '.. /.. /.. /.. /.. /animation/fadeIn';
import { bounceIn } from '.. /.. /.. /.. /.. /animation/bounceIn';
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  animations: [fadeIn, bounceIn] 
})

// Why not just write it in code, like the following
// This is recommended for standalone components or modules, that is, for third parties to implement a transition effect within the component itself
// For the corresponding system, reducing the coupling degree is more convenient for us to maintain, which is why I recommend the above writing method
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  animations: [
    trigger('fadeIn', [
      state('in', style({ display: 'none' })), // The default element is not expanded
      transition('void => *'[// Enter animation
        animate(200, keyframes([
          style({ height: '0', opacity: 0, offset: 0 }), // Element height is 0, element hide (opacity is 0), animation frame is 0%
          style({ height: The '*', opacity: 1, offset: 1 }) // After 200ms, highly adaptive expansion, element expansion (transparency 1), animation frame at 100%
        ]))
      ]),
      transition('* => void', [
        animate(200, keyframes([
          style({ height: The '*', opacity: 1, offset: 0 }), // Accordingly, make the element transition from show to hide
          style({ height: '0', opacity: 0, offset: 1})])]),])]})Copy the code

html

<! Call directly without passing state, use @ symbol to reference corresponding animation -->
<h3 *ngIf="list && list.length === 0" class="text-center text-muted" @fadeIn>No relevant data information at present!!</h3>
  </div>
 
 
<! -- Pass state, same as regular binding -->
<h3 *ngIf="list && list.length === 0" class="text-center text-muted" [@bounceIn] ="list.state">No relevant data information at present!!</h3>
Copy the code

conclusion

  1. Animation should be maximum reuse, otherwise too much animation, although the effect is pretty cool, the packaging volume is relatively large
  2. For not supportedweb-animationsAPI browsers should introduce corresponding Polyfills for compatibility”Web – animations”

Thank you for reading, if there is anything wrong, please leave a message and we will correct it in time.