Angular5：用于交换div内容，动画容器的高度变化并淡出内容的动画。(包括"almost good"普伦克)

Question

我正在尝试在Angular 5中实现一个动画，以交换容器的内容并为高度动画以适合新内容。动画的阶段将是（或者只是在Plunker中看到） 1.淡入当前内容（不透明度1-> 0） 2.动画容器的高度以适合新内容 3.淡入（不透明度1-> 0）

中的新内容

我已经实现了一些实现，，但是在动画的开头和结尾，容器div的高度跳跃。

什么是做这个动画并防止抖动的更好方法？

https://plnkr.co/edit/2ttkhfvkjdtitaaim6br?p=preview

背景 - 在我的应用程序中，我有一个flyout/dropdown/popup/模态容器，该容器的高度基于其保留的内容，并且当用户登录/登录用户时，内容会更改。

编辑：似乎边界是罪魁祸首，我仍然想知道什么是Angular中这种动画的最佳实践（KeyFrames vs另一种方法）。

来自Angular 5的Plunker App.ts的代码：

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
  trigger,
  state,
  style,
  transition,
  animate,
  keyframes,
  group
} from '@angular/animations';

@Component({
  selector: 'my-app',
  template: `
    <div style="border: black solid 1px; padding: 10px">
    <div [@list1]="!displayRed" style="border:blue solid 1px; background: lightblue">
          content 1 <br/>
          content 1 <br/>
          content 1 <br/> 
          content 1 <br/>
          content 1 <br/>
          content 1 <br/>
          content 1 <br/>
    </div>
    <div [@list1]="displayRed" style="border: red solid 1px; background: pink">
          content 2 <br/>
          content 2 <br/>
          content 2 <br/> 
          content 2 <br/>
    </div>
    </div>
    <br/>
    <button (click)="switchContent()"> Switch Content </button>
  `,
  animations:[    trigger('list1', [
      state('true', style({
        opacity: 1,
      })),
      state('false', style({
        opacity: 0,
        height:0,
        display:'none'
      })),
      transition('false => true', [
        style({
          opacity: 0,
          height:0
        }),
        animate(2000, keyframes([
          style({ opacity: 0, height:0,  offset: 0 }),
          style({ opacity: 0, height:0,  offset: 0.4 }),
          style({ opacity: 0, height:'*', offset: 0.6 }),
          style({ opacity: 1, height:'*', offset: 1 }),
        ])
        )
      ]),
      transition('true => false', [
        animate(2000, keyframes([
          style({ opacity: 1, height:'*', offset: 0 }),
          style({ opacity: 0, height:'*', offset: 0.4 }),
          style({ opacity: 0, height:0,  offset: 0.6 }),
          style({ opacity: 0, height:0,  offset: 1 }),
        ])
        )
      ])
    ])
    ]
})
export class App {
  name:string;
  displayRed:boolean=false;
  switchContent(){
    console.log('switch');
    this.displayRed=!this.displayRed;
  }
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}
@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 1

边框，填充，保证金必须设置为零，并且还必须设置溢出：必须设置隐藏以防止跳跃。