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

希望有所帮助

Angular 2+在子组件上输入动画，但不离开

1 个答案: