Angular Animations - 动态和响应式翻译

Question

我有一个通常处于休眠状态的组件（我只是说它对用户没有什么兴趣），但是在某种状态下，这个组件会被“激活”，我想把它放在屏幕并将其放大以吸引用户的注意力。

这些组件中有几个处于休眠状态，但只有 1 个被激活。休眠组件可以在屏幕上的任何位置，所以我想要一个解决方案，在激活时将组件从它原来所在的位置转换到屏幕中间，然后在完成后将其返回到原来的休眠位置​​。

尝试这样做：

模板：

<div #myElement [@isActivated]="activated">
    Hello Stack Overflow
    <button (click)="activated = activated === 'activated' ? 'dormant' : 'activated">
        Toggle
    </button>
</div>

打字稿：

@Component({
  // ...
  animations: [
    trigger('isActivated', [
      state('dormant', style($transitionToActivated)),
      state('activated', style({
        transform: 'translateX(0%) translateY(0%) scale(1)'
      })),
      transition('dormant => activated', animate('1000ms ease')),
      transition('activated => dormant', animate('1000ms ease'))
    ])
  ]
})
export class MyComponent implements OnInit {
    @ViewChild('myElement') myElement: ElementRef;
    activated = 'dormant';
    transitionToActivated: any;

    ngOnInit() {
        let rect = this.myElement.nativeElement.getBoundingClinetRect();
        this.transitionToActivated = {
            transform: ''translateX(' + ((window.screen.width / 2) - (rect.right + rect.left) / 2) + ') translateY(' +
                ((window.screen.height / 2) - (rect.top + rect.bottom) / 2) + ') scale(1.5)'
        }
    }
}

我的语法是关闭的：组件装饰器内部的 $transitionToActivated 无效。这种带有 Angular Animations 的响应式动画是否可行？还是我需要研究纯 CSS 解决方案？

[这是我正在尝试的plunker...目前我试图将它放在精确中心的尝试已被注释掉，只是一些静态动画说明]

Answer 1

我想出了几件事。

首先，上面我使用 window.screen 作为“屏幕”的宽度和高度。这实际上给了我显示器的分辨率（调整窗口大小不会影响它）。我希望 document.documentElement 获取视口的大小。

其次，我解决了动态动画的问题，方法是使用 AnimationPlayer 以编程方式定义动画 [而不是像我在上面尝试的那样在 Component 装饰器中定义它们]。

我仍然很好奇动画是否可以通过组件装饰器内的动画属性动态更改...我希望一定有办法，但我对手摇性感到相当沮丧Angular 动画 API 的一部分，但仍然无法弄清楚。

此外，当在“激活状态”下更改视口大小时，我的解决方案会表现得很时髦（不响应调整大小 [如预期的那样] 并在其“返回”动画开始时跳转到新中间视口的 [再次如预期的那样]。

这是我的解决方案的代码和plunker：

export class App implements OnInit {
  @ViewChild('myElement') myElement: ElementRef;
  activated: BehaviorSubject<string> = new BehaviorSubject<string>('dormant');
  transitionToActivated: any;
  player: AnimationPlayer;
  factory: any;

  constructor(private builder: AnimationBuilder) {}

  ngOnInit() {
    console.log('viewport width: ' + document.documentElement.clientWidth);
    console.log('viewport height: ' + document.documentElement.clientHeight);
    let rect = this.myElement.nativeElement.getBoundingClientRect();
    console.log('rect right: ' + rect.right);
    console.log('rect left: ' + rect.left);
    this.transitionToActivated = 'translateX(' + ((document.documentElement.clientWidth / 2) - 
        (rect.right + rect.left) / 2) + 'px) translateY(' + 
        ((document.documentElement.clientHeight / 2) - (rect.top + rect.bottom) / 2) + 
        'px) scale(1)';

    this.activated.subscribe(newValue => {
      this.transitionToActivated = 'translateX(' + ((document.documentElement.clientWidth / 2) - 
        (rect.right + rect.left) / 2) + 'px) translateY(' + 
        ((document.documentElement.clientHeight / 2) - (rect.top + rect.bottom) / 2) + 
        'px) scale(1)';
      console.log(this.transitionToActivated);
      if(newValue === 'activated'){
        this.factory = this.builder.build([
          style({ transform: 'translateX(0) translateY(0) scale(1)' }),
          animate(
            '1000ms', 
            style({ transform: this.transitionToActivated })
          )
        ]);
        this.player = this.factory.create(this.myElement.nativeElement, {});
        this.player.play()
      } else if(newValue === 'dormant'){
        this.factory = this.builder.build([
          style({ transform: this.transitionToActivated })
          animate(
            '1000ms', 
            style({ transform: 'translateX(0) translateY(0) scale(1)' }),
          )
        ]);
        this.player = this.factory.create(this.myElement.nativeElement, {});
        this.player.play()
      }
    })
  }
}