Angular 2/4 Animation on div height

Question

I'll try to keep it short. For some reason, My animation seems to work fine on width/opacity style attribute yet it doesn't work on height attribute....

the animation -

trigger('Grow', [
transition(':enter', [   // :enter is alias to 'void => *'
  style({height:'0'}),
  animate(500, style({height:'*'})) 
]),
transition(':leave', [   // :leave is alias to '* => void'
  animate(500, style({height:0})) 
])
])

Changing the 'height' to width/opacity and the animation works great... any one knows wheres the issue? couldn't find relative answer anywhere .

an example of what I'm trying to achieve is like the animation in udemy, upon clicking on a section the div height expands the display all the videos - https://www.udemy.com/meteor-react/

thanks for reading .

Update - still doesn't work...

maybe its something with what I'm animating on?

<div class="animate" *ngIf="show" [@animate]> 
  <div  *ngFor="let video of section"><a>hi</a></div>
</div>

what happens is once I click, the div.animate is showing (by ngif) and fills with lots of lines that says 'hi'. I want that on div.animate show, to make the animation I specified.

help! ^^

Answer 1

You don't have any states defined in your trigger() function.

trigger creates a named animation trigger, containing a list of state() and transition() entries to be evaluated when the expression bound to the trigger changes (the expression being [@slideInOut]="helpMenu" in example below).

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      state('in', style({
        overflow: 'hidden',
        height: '*',
        width: '300px'
      })),
      state('out', style({
        opacity: '0',
        overflow: 'hidden',
        height: '0px',
        width: '0px'
      })),
      transition('in => out', animate('400ms ease-in-out')),
      transition('out => in', animate('400ms ease-in-out'))
    ])
  ]
})
export class AComponent implements OnInit {

  helpMenu: string;

  constructor() { }

  ngOnInit() {
    this.helpMenu = 'out';
  }

  toggleHelpMenu(): void {
    this.helpMenu = this.helpMenu === 'out' ? 'in' : 'out';
  }

}

Then use it in your view like this:

<div [@slideInOut]="helpMenu">
   <h1>My Title</h1>
   <p>My paragraph</p>
</div>
<button (click)="toggleHelpMenu()">help</button>

Answer 2

Angular animations cat work with *ngIf directive perfectly fine.

Right now there's a section in the official docs that describes how to do it.

The problem in your example is that template animation trigger is specified as [@animate], but in component's animations declaration actual trigger is Grow. Thus, template trigger needs to be specified as [@Grow].

app.component.ts

    trigger("grow", [ // Note the trigger name
      transition(":enter", [
        // :enter is alias to 'void => *'
        style({ height: "0", overflow: "hidden" }),
        animate(500, style({ height: "*" }))
      ]),
      transition(":leave", [
        // :leave is alias to '* => void'
        animate(500, style({ height: 0, overflow: "hidden" }))
      ])
    ])

app.component.html

<div class="test" *ngIf="show" [@grow]> <!-- Use exact same trigger name here -->
  <div *ngFor="let video of section"><a>hi</a></div>
</div>

Working demo: stackblitz