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: [
    trigger(
        'myAnimation',
        [
            transition(
                ':enter', [
                    style({ transform: 'translateX(100%)', opacity: 0 }),
                    animate('500ms', style({ transform: 'translateX(0)', 'opacity': 1 }))
                ]
            ),
            transition(
                ':leave', [
                    style({ transform: 'translateX(0)', opacity: 1 }),
                    animate('500ms', style({ transform: 'translateX(100%)', 'opacity': 0 }))
                ]
            )
        ]
    )
]

})

and the sub component has a template with first div like this

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

parent component has *ngIf

 <is-time-controlled  *ngIf="somelogic"> </is-time-controlled>

when logic is true i see enter animation but when logic becomes false i dont see leaving animation.

i see various opened issues. do we have a fix for this?

回答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

export class AppComponent implements OnInit {

    public state: string;
    public somelogic: 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

来源：https://stackoverflow.com/questions/47341321/angular-2-enter-animation-on-child-component-works-but-leave-does-not