改变位置时的 Angular 动画元素？

Question

我正在尝试为我的 Angular 项目中的 div 制作动画，以便它在屏幕上移动。 div 是相对定位的(因为有多个元素)，但是当我应用动画时，我将其更改为固定(因为我无法从相对状态获取确切位置，并且无法发送参数)。

问题在于该位置恰好在过渡时间的一半处应用于动画。因此，如果我将其设置为 5 秒，则在 2.5 秒时 div 将从相对更改为固定。这会导致动画随机跳跃并在 2.5 秒后从不同的位置开始动画。这是正常行为吗？

我创建了一个(基本)plunkr 来展示我的意思:

https://plnkr.co/edit/kSnGSqZUIkMn7y3Vv2bm?p=preview

HTML:

  <div style="position:relative; top:0; left:0; width:20%; height:20%"
  [@routerTransition]="animation">
    <h2>Home</h2> 
  </div>
  <button (click)="animateBox()"> Animate </button>

还有动画:

return trigger('routerTransition', [
    state('*', style({   })),
    transition('* => move', animate(5000, style({position: 'fixed', left: "500px",  top: "500px",  })))

我可以通过应用position:fixed在动画的一开始来解决这个问题，例如:

state('move', style({ position:"fixed"  })),

但是，元素不会从其起始位置移动，而是从固定位置移动。

有没有办法从相对位置开始动画，然后将其动画到不同的(固定)位置，同时避免中途“跳跃”？

Answer 1

This is the best way you can fix this just detect when the scroll ismore than your pixel you want and add some variable true or falseafter you detect that you can add some CSS class and that's it.

Some code example.

yourComponent.html

<md-card  [class.fixed]="navIsFixed">
    <img src="{{Product.image_url}}" style="width:100%;" alt="">
</md-card>

yourComponent.css

.fixed {
  position: fixed;
  width: 250px;
  top: 20px;
  z-index: 2;
}

yourComponent.ts

import { Component, OnInit, HostListener, Inject } from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';

@Component({
  selector: 'app-client-product-prev',
  templateUrl: './client-product-prev.component.html',
  styleUrls: ['./client-product-prev.component.css'],
})

export class yourComponent implements OnInit {

  public navIsFixed: Boolean = false;
  
  constructor(){}
  
  ngOnInit() {

  }


  @HostListener("window:scroll", [])
  onWindowScroll() {
    const number = this.document.body.scrollTop;
    if (number > 300) {
      this.navIsFixed = true;
      console.log(number);
    } else if (this.navIsFixed && number < 300) {
      this.navIsFixed = false;
    }
    
  }




}