3

我正在尝试为我的 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"  })),

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

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

4

1 回答 1

-1

这是您可以解决此问题的最佳方法，只需检测滚动何时超过您想要的像素，并在检测到您可以添加一些 CSS 类后添加一些变量 true 或 false ，仅此而已。

一些代码示例。

你的组件.html

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

你的组件.css

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

你的组件.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;
    }
    
  }




}
于 2017-08-27T22:02:23.660 回答