[Fixed] Angular 2/4 Animation on div height

Issue

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! ^^

Solution

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>