0

I'm using Angular BrowserAnimations, but can't seem to actually trigger it.

My component animations are set to

animations: [
  trigger('expandHide', [
    state('expanded', style({
      height: 'auto'
    })),
    state('hidden', style({
      height: '20px'
    })),
    transition('* => expanded', [
      animate('1s')
    ]),
    transition('* => hidden', [
      animate('0.25s')
    ])
  ])
]

And my template definition for the div I want to animate is

<div class="container" [@expandHide]="sheet.isExpanded ? 'expanded' : 'hidden'">

And yes, sheet.isExpanded gets set in a neighboring div with <div (click)="sheet.isExpanded = !sheet.isExpanded">

I would expect it to take 1s to expand in height, and 0.25s to collapse back down. However it just opens and closes immediately like without any transitions defined. How can I get this animation to work?

Yeheshuah
  • 1,216
  • 1
  • 13
  • 28
Joshua Ohana
  • 5,613
  • 12
  • 56
  • 112

1 Answers1

0
  1. Remove wildcards
'* => expanded'　→　'hidden => expanded'
'* => hidden' →　'expanded => hidden'
  1. Does anyone change your sheet.isExpanded flag?

The most simple solution is

<div
  class="container" 
  [@expandHide]="sheet.isExpanded ? 'expanded' : 'hidden'"
  (click)="sheet.isExpanded=!sheet.isExpanded" ★ this one
>

Take a look at example.

Yeheshuah
  • 1,216
  • 1
  • 13
  • 28
  • yes, sheet.isExpanded gets set in a neighboring div with `
    `
     – Joshua Ohana Jan 23 '20 at 02:38
  • Updated answer. Try to remove wildcards ('* => expanded'　→　'hidden => expanded', '* => hidden' →　'expanded => hidden') – Yeheshuah Jan 23 '20 at 04:44
  • I tried but no dice. Your example works but I can't seem to translate it to my specific issues. It's in an ngFor and then an ngIf so it must be an issue unrelated to the animations. Thanks for you help. P.S. ... your name is my name :) – Joshua Ohana Jan 23 '20 at 04:59
  • ;) Oh, you can try to assign id to div inside of ngFor. – Yeheshuah Jan 23 '20 at 05:07