Angular 2+ Enter Animation On Child Component Works But Leave Does Not

i have a sub component like this @Component({ selector: 'is-time-controlled', templateUrl: './is-time-controlled.html', styleUrls: ['./is-time-controlled.less'], animations: [

Solution 1:

I suggest you to try like this:

animations: [trigger('myAnimation', [
            state('enter', style({
                transform: 'translateX(100%)';
                opacity: '0';
            })),
            state('leave', style({
                transform: 'translateX(0)';
                opacity: '1';
            })),
            transition('enter <=> leave', [animate(500)])
        ]
    )]

This creates two states. All you have to do now is to create a variable to fetch the state, right after changing 'somelogic' to true/false

exportclassAppComponentimplementsOnInit {

    publicstate: string;
    publicsomelogic: boolean;

    function1(): any {
        this.somelogic = true;
        this.state = 'enter';
    }

    function2(): any {
        this.somelogic = false;
        this.state = 'leave';
    }
}

In your HTML

<div class="card card-padding" [@myAnimation]="state">

Hope it helps