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