npm install @angular/animations
Copy the code
// app/app.module.ts  
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';   
@NgModule({   
declarations: [...] .
  imports: [   
     BrowserAnimationsModule   
].
  providers: [],   
  bootstrap: [AppComponent]  
})
Copy the code
  • Toggle between two Class style classes, for example:activeandinactiveSwitching between
  • To remove or display, as an instructionNgIf, ngFor
import { trigger, state, style, animate, transition } from '@angular/animations';
Copy the code



(1) Toggle between two Class style classes



@Component()
animations 

// app/demo/demo-animation/demo-animation.component.ts   
@Component(   
.
  animations: [   
    trigger('colorState', [   
      state('active', style({   
        background: 'red'   
      })),   
      state('inactive', style({   
        background: 'blue'   
      })),   
      transition('active => inactive', animate('500ms ease-in')),   
      transition('inactive => active', animate('500ms ease-out'))   
    ])   
  ])  
export class DemoAnimationComponent implements OnInit {    
  isActive: boolean;      
  toActive() {   
this.isActive = ! this.isActive;
  }  
}   
// app/demo/demo-animation/demo-animation.component.html   
<button (click)="toActive()">

      
Copy the code

@colorState
div



animations
colorState
@colorState
state()
style()



transition()






trigger()
@



(2) Remove or display



*
void 

// app/demo/demo-animation.html   
@Component({   
.
  animations: [   
    trigger('moveInState', [   
State ('in', style({opacity: 1, transform: 'translate3d(0,0,0)'}),
      transition('void => *', [   
        style({transform: 'translate3d(0, 100px, 0)', opacity: 0}),   
        animate(200)   
      ]),   
      transition('* => void', [   
        animate(200, style({transform: 'translate3d(0, 100px, 0)', opacity: 0}))   
      ])   
    ])   
  ]  
})  
export class DemoAnimationComponent implements OnInit {    
  isIn: boolean; 


  toIn() { 
this.isIn = ! this.isIn;
  }  
}   
// app/demo/demo-animation.component.html   
<button (click)="toIn()">

      
Copy the code

void => *
* => void

  • *Wildcards match any animation;voidIndicates that the element is not attached to the view.
  • There are two aliases::enterIs equivalent tovoid => *.:leaveIs equivalent to* => void.



* 

// app/demo/demo-animation.component.ts   
@Component({   
.
  animations: [   
.
    trigger('expandState', [   
      state('active', style({   
        height: '*'   
      })),   
      state('inactive', style({   
        height: 0   
      })),   
     transition('active <=> inactive', animate('300ms ease'))   
    ])   
  ]  
})  
export class DemoAnimationComponent implements OnInit {    
  isExpand: boolean;   
  expandClass: string;    
  ngOnInit() {   
    this.expandClass = this.isExpand ? 'active' : 'inactive';   
  }    
  open() {   
this.isExpand = ! this.isExpand;
    this.expandClass = this.isExpand ? 'active' : 'inactive';   
  }  
}   
//  app/demo/demo-animation.component.html   
<button (click)="open()"> </button>
<div style="background: red; overflow: hidden;" [@expandState]="expandClass">
<div style=" padding-right: 20px">
</div>

Copy the code

expandState
active
*
inactive



*



The callback function



transitionStart
transitionEnd
@triggerName.start
@triggerName.done 

<div style="background: red; overflow: hidden;" [@expandState]="expandClass2" (@expandState.start)="transitionStart($event)" (@expandState.done)="transitionEnd($event)">
<div style=" padding-right: 20px">
</div>
Copy the code

$event







done
end



Angular4 development combat


If you have any questions or questions, feel free to leave them in the comments section below!