I'm trying to 'slide toggle' an element using Angular 2 Animations.
https://plnkr.co/edit/Dof60vwHp79eiThhj9vW?p=preview
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss'],
animations: [
trigger('toggleHeight', [
state('inactive', style({
height: '0',
})),
state('active', style({
height: '100%' //this.el.nativeElement.scrollHeight + 'px'
})),
transition('inactive => active', animate('300ms ease-in')),
transition('active => inactive', animate('300ms ease-out'))
])
]
})
Above code works but I can't exactly see the transition of the height. I know it's not possible to animate a 'height' property with 'auto' value in CSS.
In order to auto generate the height, Is it possible to make it something like,
state('active', style({
height: this.nativeElement.height + 'px'
})),
?
Thanks.
This should work AFAIK.
height: '*'
Just checked. It works !
You can read more here : https://angular.io/docs/ts/latest/guide/animations.html#!#automatic-property-calculation
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments