Angular 2/4 Animation on div height
I'll try to be short. For some reason, my animation works fine with the width / opacity attribute of the style, but not the height ...
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 'height' to width / opacity and animations works fine ... does anyone know where the problem is? couldn't find a relative answer anywhere.
an example of what I am trying to achieve is like animation in udemy, when clicking on a section, the div height expands the display of all videos - https://www.udemy.com/meteor-react/
Thanks for reading.
Update - still not working ...
maybe this is what i animate?
<div class="animate" *ngIf="show" [@animate]>
<div *ngFor="let video of section"><a>hi</a></div>
</div>
what happens when i click, div.animate shows (by ngif) and is filled with many lines that say hello. I want div.animate to show the animation I specified.
Help! ^^
source to share
You don't have states defined in your function trigger()
.
Trigger creates a named animation trigger comprising a list of records state()
and transition()
which must be evaluated when changing the expression associated with a trigger (expression [@slideInOut]="helpMenuOpen"
in the 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 {
helpMenuOpen: string;
constructor() { }
ngOnInit() {
this.helpMenuOpen = 'out';
}
toggleHelpMenu(): void {
this.helpMenuOpen = this.helpMenuOpen === 'out' ? 'in' : 'out';
}
}
Then use it in your opinion like this:
<div [@slideInOut]="helpMenuOpen">
<h1>My Title</h1>
<p>My paragraph</p>
</div>
<button (click)="toggleHelpMenu()">help</button>
source to share