当模型更改时，在Angular2中的旧值和新值之间设置动画

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

@NgModule({
  imports: [
    BrowserAnimationsModule
  ],
  // other module configurations
})
export class AppModule { }

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  animations: [
    trigger('valueChange', [
      state('old', style({
        // styles for the old value
      })),
      state('new', style({
        // styles for the new value
      })),
      transition('old => new', [
        animate('500ms ease-out', style({
          // animation styles for the transition from old to new value
        }))
      ]),
      transition('new => old', [
        animate('500ms ease-out', style({
          // animation styles for the transition from new to old value
        }))
      ])
    ])
  ]
})
export class MyComponentComponent {
  // component logic
}

<div [@valueChange]="modelValue"></div>