Angular动画：响应数值变化

Question

我想使用 Angular 动画根据滑块的值旋转图像。我可以使用值更改通知程序触发动画：增量和减量。但不能在动画样式块中使用 css 属性中的最新值。

到目前为止我的代码是这样的-

用于在模板中绑定-

<mat-slider [(ngModel)]="rotationAngle" ...>
<img [@photoState]="rotationAngle" src="...">

在组件class声明中-

  rotationAngle: number = 0;

  constructor() { }

  ngOnInit() {
    this.rotationAngle = 0;
  }

  get stateName() {
    return this.rotationAngle;
  }

现在在@Component 块中-

animations: [
     trigger('photoState',
       [
          transition(':increment, :decrement', [
                    style('*'),
                    animate('500ms', style({transform: 'rotate({{ rotationAngle }}deg)'}))
              ],{
                  params: {
                    rotationAngle:  ... /* need to use the slider value here, I assume. Any other way? */
                  }
              })
        ])
  ]

有什么办法吗？我是否应该尝试其他一些方法，例如 AnimationBuilder（也许）？

Answer 1

我尝试使用 angular 动画旋转 div，基本上我遵循了 parent child 类组件关系，其中 parent通过使用旋转 div 的角度，child 使用 @Input 接受它，我在动画中使用了该值，旋转

这里link你可以看看https://stackblitz.com/edit/angular-animations-params

不好意思我没有遵循正确的命名约定.....

Answer 2

尽管@ravi 发布的内容有效，但我认为使用 AnimationBuilder 是更好的方法。我所做的是 -

    /* use attribute #imageContainer with the element you want to perform animation on */        
    @ViewChild("imageContainer") imageContainerElement: ElementRef;

    rotationAngle:number;

    let animationFactory = this.animationBuilder.build([
                  style('*'),
                  animate('500ms', style({transform: 'rotate(' + this.rotationAngle + 'deg)'}))
                ]);

   animationFactory.create(this.imageContainerElement.nativeElement).play();

这解决了我的问题。

Angular动画：响应数值变化

Angular animation: respond to numeric value change

javascript

angular

angular-animations