Angular 2+在子組件上輸入動畫有效，但離開不起作用

Question

我有一個這樣的子組件

@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的模板，像這樣

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

父組件具有* ngIf

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

當邏輯為真時，我看到輸入動畫，但是當邏輯為假時，我看不到離開動畫。

我看到各種未解決的問題。 我們有解決辦法嗎？

Answer 1

我建議您嘗試這樣：

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之后立即創建一個變量以獲取狀態

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">

希望能幫助到你