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

在Angular2中，当模型更改时，可以通过使用Angular的动画功能来设置旧值和新值之间的动画效果。Angular的动画功能是通过Angular的动画模块来实现的，该模块提供了一组指令和API，用于在模型更改时应用动画效果。

要在Angular2中设置旧值和新值之间的动画效果，可以按照以下步骤进行操作：

导入动画模块：首先，在你的Angular2应用中，需要导入Angular的动画模块。可以通过在你的模块文件中导入BrowserAnimationsModule或NoopAnimationsModule来启用动画功能。例如：

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

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

定义动画效果：接下来，你需要定义旧值和新值之间的动画效果。可以使用Angular的动画DSL（Domain-Specific Language）来定义动画。你可以在组件的元数据中使用@Component装饰器的animations属性来定义动画效果。例如：

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
}

在上面的代码中，我们定义了一个名为valueChange的动画触发器，它有两个状态：old和new，分别表示旧值和新值。我们还定义了两个状态之间的过渡动画效果，使用transition函数来指定过渡的条件和动画效果。