Question

我正在尝试在角度项目中为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来解决这个问题：在动画的最开始修复，例如：

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

然而，

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

有没有办法从相对位置开始动画，然后将动画设置为不同（固定）位置，同时避免中途“跳跃”？

Answer 1

这是您可以解决此问题的最佳方法，只需检测滚动时间   超过你想要的像素，并添加一些变量true或false   在你发现你可以添加一些CSS类之后就是这样。

一些代码示例。

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;
    }

  }




}

改变位置时的角度动画元素？

1 个答案:

yourComponent.html

yourComponent.css

yourComponent.ts