2

我想创建一个基于变量的动画。例如，有一个宽度为 0px 的 div 并且在单击事件时以动画方式更改其宽度，但其新宽度的大小基于来自单击事件函数的参数。此外，它应该从其当前位置设置宽度动画，例如，如果它的当前宽度为 50 像素，新宽度为 100 像素，那么动画应该以 50 像素而不是 0 像素开始。

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

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

4

0 回答 0