Menu
I have a component that I can animate on entry like this, the entry animation works fine. The handleRemoval method gets executed and an event emitter filters the component from the list of components (using observables). But the :leave animation does not run:
@Component({
animations: [
trigger(
'enterAnimation', [
transition(':enter', [
style({transform: 'translateY(100%)', opacity: 0}),
animate('500ms', style({transform: 'translateY(0)', opacity: 1}))
]),
transition(':leave', [
style({transform: 'translateY(0)', opacity: 1}),
animate('500ms', style({transform: 'translateY(100%)', opacity: 0}))
])
]
)
],
template: `
<div class="mb1 card text-xs-center rounded" [@enterAnimation]="show">
...
export class ContentPropertyComponent {
show: boolean = false;
constructor(private router: Router) {
this.show = true;
}
handleRemoval(contentProperty: PropertyModel) {
this.show = false;
this.delete.emit(this.contentProperty);
}
}
Any help appreciated.
965
Transitions between two states take place so that we can build simple animations between two states driven by a model attribute. Transition basically means navigating from the current state to a new state. In angular, the transition is an animation-specific function which is used in angular's animation DSL language.
To disable all animations for an Angular app, place the @. disabled host binding on the topmost Angular component.
The State Change Expression instructs Angular when to run the transition's animations, it can either be. a string with a specific syntax. or a function that compares the previous and current state (value of the expression bound to the element's trigger) and returns true if the transition should occur or false otherwise.
Angular introduced the :enter and :leave shortcuts in version 2.1.0, so if you're using an earlier version (as I suspect), you should use the void => * and * => void transition definitions. Or, alternatively, upgrade your Angular distribution to 2.1.0+.
Changing your code accordingly works in Angular 2.0+
animations: [
trigger("enterAnimation", [
transition('void => *', [
style({transform: 'translateY(100%)', opacity: 0}),
animate('500ms', style({transform: 'translateY(0)', opacity: 1}))
]),
transition('* => void', [
style({transform: 'translateY(0)', opacity: 1}),
animate('500ms', style({transform: 'translateY(100%)', opacity: 0}))
])
])
]
Plunker: https://plnkr.co/edit/xW38PWgD3SQyhRv09IUW?p=preview
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
