Angular5：动画交换div的内容，动画容器的高度变化和淡出内容。 （包括“几乎不错”的 Plunker）

Question

我正在尝试在 Angular 5 中实现动画以交换容器的内容并对高度进行动画处理以适应新内容。动画的阶段将是（或只是在 Plunker 中看到） 1.淡出当前内容（不透明度1->0） 2. 为容器的高度设置动画以适应新内容 3. 将新内容淡入(opacity 1->0)

我做了一些实现，但是在动画开始和结束的时候容器div的高度有一个奇怪的跳跃。

制作此动画并防止抖动的更好方法是什么？

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

背景 - 在我的应用程序中，我有一个弹出/下拉/弹出/模态容器，其高度取决于它所包含的内容，并且当用户登录/注销时内容会发生变化。

编辑： 似乎边界是罪魁祸首，我仍然想知道这种角度动画的最佳实践是什么（关键帧与另一种方法）。

来自 plunker app.ts 的 Angular 5 代码：

//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

边框、内边距、边距必须设置为零，并且溢出：隐藏必须设置以防止跳跃。