nAnimate angular 4，隐藏幻灯片上的文本

我今天在玩angular 4动画包，它真的完美无瑕；然而，我仍然有一个问题，因为我正在制作一个从0像素宽度到200像素宽度的元素的动画，我注意到我的文本使div在消失时展开，即：由于包装盒，它使高度更大。请参见下面的动画gif：

TS文件：

import { fade, ease, bounceOutLeftAnimation, fadeInAnimation } from './../animations';
import { Component } from '@angular/core';
import { trigger, stagger, query, group, state, animateChild, transition, animate, style, keyframes, useAnimation } from '@angular/animations';

@Component({
  selector: 'todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.css'],
  animations: [

      trigger('easeOutTest', [
        state('normal', style({
            backgroundColor: 'blue',
            width: '600px'
        })),
        state('shorten', style({
          backgroundColor: 'Green',
          width: '800px'
        })),
        transition('normal => shorten', animate('1000ms cubic-bezier(.06, .62, .23, .93)')),
        transition('shorten => normal', animate('1000ms cubic-bezier(.06, .62, .23, .93)'))
      ]),


      trigger('easeInTest', [
        state('invisible', style({
            backgroundColor: 'blue',
            opacity: 0,
            width: 0,
        })),
        state('visible', style({
          backgroundColor: 'Green',
            opacity: 1,
            width: '170px',
        })),
        transition('visible => invisible', animate('1000ms cubic-bezier(.06, .62, .23, .93)')),
        transition('invisible => visible', animate('1000ms cubic-bezier(.06, .62, .23, .93)'))
      ]),
  ]
})


export class TodosComponent {

  state: string = 'invisible';
  mainState: string = 'shorten';

  animateMe() {
    if (this.state === 'invisible') {
      this.state = 'visible';
      this.mainState = 'normal';
    } else if ( this.state === 'visible') {
      this.state =  'invisible';
      this.mainState = 'shorten';
    }
  }


}

我的视图HTML文件：

<h1>Test</h1>

<a (click)="animateMe()">Animate</a>

<div style="width: 1100px;">

  <div [@easeOutTest]='mainState'  style=" float:left; color: white;  display: inline-block">
    <div>
      dit is een main test
    </div>
  </div>

  <div [@easeInTest]='state' style="display: inline-block; color: white; float:left; margin-left: 30px;">
    <div>
      dit is een test sidebar
    </div>
  </div>

</div>

我找到了一种解决这个问题的方法，将文本缩小并固定高度。但是这项技术相当麻烦，而且由于字体大小的原因，仍然不能流畅地制作动画。请参见下面的代码和图像：

因此，我想知道是否有人有更好的wya来实现同样的结果。提前谢谢，干杯

我发现溢出：隐藏属性可以帮助我

修订守则：

trigger('easeInTest', [
  state('invisible', style({
      backgroundColor: 'blue',
      opacity: 0,
      width: 0,
      overflow: 'hidden'
  })),
  state('visible', style({
    backgroundColor: 'Green',
      opacity: 1,
      width: '170px',
      overflow: '*'
  })),