slide-in slide-out functionality using Angular2 animation with css transition

Question

I am trying to build a slide-in slide-out type of slider using angular animation but I'm facing some issues like...

• It's getting out of division(I know it's because i used translateY(-100%), but what is alternative?)
• It's increasing the size of div when two div are shown at a time.

here is my HTML code.

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

and here is my app component...

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})
        )])
      ]
    )
  ],
  
})

thanks in advance. :)