Javascript 如何使用“动态”属性设置动画

我想创建一个基于变量的动画。例如，有一个宽度为0px的div，单击evetn可通过动画方式更改其宽度，但其大小取决于来自单击事件函数的参数。此外，它应该设置宽度从其当前位置的动画，例如，如果其当前宽度为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;
    }
}

@组件({
选择器：“应用程序动画”，
templateUrl:“./anim.component.html”，
样式URL:['./anim.component.scss']，
动画：[
触发器（'状态'[
状态（'inactive'，样式({
“宽度”：currentWidth//要从中开始的当前宽度
})),
状态（'active'，样式({
“宽度”：newWith//
<div class="row-chart-result" [@state]="state" (click)="resize('150px')"></div>