Angular 4.3.3 working enter and leave Animation (with *ngIf)

slide-in-out-bar.component.ts

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

@Component({
  selector: 'my-bar', // <my-app></my-app>
  template: `
  <div class="containit">
    <div class="lined-content" *ngIf="visible" [@shiftUpDown]="visible">line</div>
  </div>
  <div class="other">Some content below</div>
  `,
  styles: [`
  .containit {
    width: 100vw;
    overflow: hidden;
  }
  div.lined-content {
    color: #888;
    width: 100vw;
    border-bottom: solid 2px #f5ef31;
  }
  .other {
    height: 4em;
    width: 80vw;
    background-color: rgba(255,255,255, .2);
    margin: 1em auto;
  }

  `],
  animations: [
    trigger('shiftUpDown', [
      transition('* => void', [
        animate(300, keyframes([
          style({transform: 'translateX(0)', offset: 0}),
          style({height: '*', transform: 'translateX(-100%)', offset: 0.5}),
          style({height: 0, transform: 'translateX(-100%)', offset: 1}),
        ]))
      ]),
      transition('void => *', [
        animate(300, keyframes([
          style({height: 0, transform: 'translateX(100%)', offset: 0}),
          style({height: '*', transform: 'translateX(100%)', offset: .5}),
          style({transform: 'translateX(0)', offset: 1}),
        ]))
      ])
    ])
  ]
})
export class Bar {

  @Input() visible = false;

  constructor() {
  }

}