Angular5：用于交换div内容、设置容器高度变化动画以及淡出内容的动画。（“几乎好”包括Plunker）

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

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

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

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

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

来自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 {}

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，VERSION}
从“@angular/platform browser”导入{BrowserModule}
从“@angular/platform browser/animations”导入{BrowserAnimationsModule}；
进口{
触发
国家,，
风格
过渡，
使有生气
关键帧，
组
}来自“@angular/animations”；
@组成部分({
选择器：“我的应用程序”，
模板：`
内容1

内容1

内容1

内容1

内容1

内容1

内容1

内容2

内容2

内容2

内容2



切换内容
`,
动画：[触发器（'list1'[
状态（'true'，样式({
不透明度：1，
})),
状态（'false'，样式({
不透明度：0，
高度:0,，
显示：“无”
})),
转换（'false=>true'[
风格({
不透明度：0，
身高：0
}),
设置动画（2000，关键帧）([
样式（{不透明度：0，高度：0，偏移量：0}），
样式（{不透明度：0，高度：0，偏移量：0.4}），
样式（{不透明度：0，高度：'*'，偏移量：0.6}），
样式（{不透明度：1，高度：'*'，偏移量：1}），
])
)
]),
转换（'true=>false'[
设置动画（2000，关键帧）([
样式（{不透明度：1，高度：'*'，偏移量：0}），
样式（{不透明度：0，高度：'*'，偏移量：0.4}），
样式（{不透明度：0，高度：0，偏移量：0.6}），
样式（{不透明度：0，高度：0，偏移量：1}），
])
)
])
])
]
})
导出类应用程序{
名称：字符串；
显示红色：布尔值=假；
switchContent（）{
console.log（'switch'）；
this.displayRed=！this.displayRed；
}
构造函数（）{
this.name=`Angular！v${VERSION.full}`
}
}
@NGD模块({
导入：[BrowserModule，BrowserAnimationsModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

边框、填充、边距必须设置为零，并且溢出：隐藏必须设置为防止跳转。

边框、填充、边距必须设置为零，并且溢出：隐藏必须设置为防止跳转。

我想我在这里做了你想做的事情：除了，我选择淡入新内容，我想我做了你想做的：除了，我选择了淡入新内容，而不是淡出旧内容。