3

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>
Runtime Terror
  • 6,242
  • 11
  • 50
  • 90

1 Answers1

3

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}))
              ])
          ]
      )
Himanshu
  • 76
  • 5
  • Is there a proper way to achieve this?(other than the height animation, which seems non-smooth) – Jay Surya Dec 10 '19 at 12:49
  • you can always go with css transition animation if looks not that smooth https://stackblitz.com/edit/angular-gvzz8a – Himanshu Dec 11 '19 at 07:11