angular 过度动画

1.在所需过度ts中引入

import {trigger, style, animate, transition, state} from '@angular/animations'

在app.module.ts 引入

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

2.设定过度方案

trigger(‘动画组名’［
  state(‘动画名’,style({写CSS}),
  state(‘动画名2’,style({写CSS})
transition(‘动画名＝>动画名2’,animate(‘运动时间’))
］)

3.所需元素绑定触发

［@动画组名］＝＂判断条件？‘动画名’:‘动画名2’＂
  或者@动画组名

案例

html

<div style="height: 30px;width: 100px;border: 1px solid cornflowerblue" (mouseenter)="mousein()"  (mouseleave)="mouseout()"></div>

<div style="position: absolute" *ngIf="isshow" @myInsertRemoveTrigger  >
  <ng-content class="mydiv"></ng-content>
</div>

ts代码

import {Component, OnInit} from '@angular/core';
import {trigger, style, animate, transition, state} from '@angular/animations'


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'],
  animations: [
    trigger('myInsertRemoveTrigger', [
      transition(':enter', [
        style({opacity: 0}),
        animate('100ms', style({opacity: 1})),
      ]),
      transition(':leave', [
        animate('100ms', style({opacity: 0}))
      ])
    ]),
  ],
})
export class TestComponent implements OnInit {

  constructor() {
  }

  ngOnInit(): void {
  }

  isshow = false

  mousein() {
    this.isshow = true
  }

  mouseout() {
    this.isshow = false
  }
}

别忘了在app.module.ts中引入

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';