角度如何使用动态属性设置动画

Question

我想基于变量创建一个animatoin。例如，有一个宽度为0px的div，点击evetn将其宽度更改为动画方式，但大小是基于参数的新宽度，该参数来自click事件函数。此外，它应该将宽度设置为当前位置的动画，例如，如果其当前宽度为50px，新宽度为100px，则动画应以50px而不是0px开始。

@Component({
    selector: 'app-anim',
    templateUrl: './anim.component.html',
    styleUrls: ['./anim.component.scss'],
    animations: [
        trigger('state', [
            state('inactive', style({
                'width' : currentWidth //the current width to start from
            })),
            state('active', style({
                'width': newWith //<=== how to use variable here?
            })),
            transition('inactive => active', animate('4000ms ease-in'))
        ])
    ]
})
export class AnimComponent {
    public state = 'inactive';

    constructor () {}

    public ngOnInit(){

    }

    public resize(width){
        this.newWidth = width;
        this.state = 'active';

        this.currentWidth = width;
    }
}

//事件

<div class="row-chart-result" [@state]="state" (click)="resize('150px')"></div>

基于变量使用动画的建议方法是什么？