Angular 2+在子组件上输入动画有效，但离开不起作用 [英] 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 }))
                ]
            )
        ]
    )
]

})

子组件具有一个这样的模板，该模板的第一个div是这样的

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

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

父组件具有* ngIf

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?

推荐答案

我建议您尝试这样:

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

这将创建两个状态.您现在要做的就是在将"somelogic"更改为true/false后立即创建一个变量以获取状态

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';
    }
}

在您的HTML中

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

希望有帮助

这篇关于Angular 2+在子组件上输入动画有效，但离开不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！