Animate sibling element

Question

In my app I've 2 sibling element. One element is hidden and I can toggle it's visibility by button. I've added an animation, when this hidden element become visible. The problem is, the sibling element doesn't animate. It just jumps to it's new position. Any idea how to fix this? See the stackblitz example.

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css',],
  animations: [
      trigger(
          "enterAnimation", [
              transition(":enter", [
                  style({transform: "translateY(-100%)", opacity: 0}),
                  animate("500ms", style({transform: "translateY(0)", opacity: 1}))
              ]),
              transition(":leave", [
                  style({transform: "translateY(0)", opacity: 1}),
                  animate("500ms", style({transform: "translateY(-100%)", opacity: 0}))
              ])
          ]
      )
  ],
})
export class AppComponent  {
  visible: boolean = false;

  toggle(): void {
    this.visible = !this.visible;
  }
}

app.component.html

<div class="box1" *ngIf="visible" [@enterAnimation]></div>
<div class="box2"></div>

<button (click)="toggle()">Toggle</button>

Answer 1

instead of using transform use height to get that effect. demo

trigger(
          "enterAnimation", [
              transition(":enter", [
                  style({height: "0px", opacity: 0}),
                  animate("500ms", style({height: "50px", opacity: 1}))
              ]),
              transition(":leave", [
                  style({height: "50px", opacity: 1}),
                  animate("500ms", style({height: "0px", opacity: 0}))
              ])
          ]
      )