值变化时输入动画Angular 2+

Question

你好，我是 angular 动画的新手，我想在输入值改变时让我的输入动画（是一个计算器）。我已经做到了，怎么才能拍一个事件来执行动画呢？

@Component({
    selector: 'xxxxx',
    templateUrl: './yyyy.html',
    styleUrls: ['./example.scss'],
    animations: [
        trigger('simpleFadeAnimation', [
            state('in', style({opacity: 1})),
            transition(':enter', [
                style({opacity: 0}),
                animate(600)
            ])
        ])
    ]
})

Answer 1

你可以使用通配符

animations: [
        trigger('simpleFadeAnimation', [
            transition('*=>*', [
                style({opacity: 0}),
                animate(600)
            ])
        ])
    ]

所以，您可以使用

<div [@simpleFadeAnimation]="value">
.....some...
</div>

每次更改变量“值”时，动画开始

值变化时输入动画Angular 2+

Input Animation when value changes Angular 2+

angular

angular-animations

angular9