使用带有css转换的Angular2动画的滑入式滑出功能

Question

我正在尝试使用角度动画制作滑入式滑出式滑块，但我遇到了一些问题，比如......

• 它已经离开了分区（我知道这是因为我使用了translateY（-100％），但还有什么选择？）
• 当一次显示两个div时，它会增加div的大小。

这是我的HTML代码。

<div class="col-lg-2 col-md-2 col-sm-2" (click)='setEnable()'>
                                <div [class] = "disc ? 'text-minus' : ''"><span class="pull-right cursor_pointer settings_plus_minus font-bold font_size_20 ticket_panel_text_color">{{set ? '-' : '+'}}</span></div>
</div>


<div class="panel-body settings_one_line_description" *ngIf='!set' [@plusClick]='set'>
                        <span class="one_line_description_text_color">Access to networking platform, Uploading database of the ticket type, Status  </span>
</div>

<div class="panel-body" *ngIf = 'set' [@plusClick]='set'>
                    blah blah blah...
</div>

这是我的应用程序组件......

import { Component,
  Input,
  trigger,
  state,
  style,
  transition,
  animate } from '@angular/core';

@Component({

  selector: 'my-app',
  templateUrl:'app/tickets.html',
  animations: [
    trigger(
      'plusClick', [
      	//transition('* <=> *', animate('200ms ease-out'))
  		// transition('inactive => active', animate('1000ms ease-in')),
		// transition('active => inactive', animate('1000ms ease-out'))
        transition(':enter', [
          style({transform: 'translateY(-100%)', opacity: 0}),
          animate('2000ms ease-in', style({transform: 'translateY(0%)', opacity: 1}))
        ]),
        transition(':leave', [
          style({transform: 'translateY(0%)', 'opacity': 1}),
          animate('2000ms ease-out', style({transform: 'translateY(-100%)', opacity: 0})
        )])
      ]
    )
  ],
  
})

提前谢谢。 ：）