從Angular中其他不同組件中的一個組件實現動畫功能

Question

我正在嘗試實現一個動畫功能，該功能已在我的app.component.ts編寫為其他組件。 實際上，我只想擁有一個功能並在其他一些組件中實現它，而不是一遍又一遍地編寫該功能。 我不知道這是執行此操作的正確方法，還是有更好的方法？

app.component.ts：

import { Component, OnInit, HostListener, ElementRef } from "@angular/core";
import { trigger, state, style, animate, transition } from 
"@angular/animations";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  animations: [
    trigger("scrollAnimationMain", [
      state(
        "show",
        style({
          opacity: 1,
          transform: "translateX(0)"
        })
      ),
      state(
        "hide",
        style({
          opacity: 0,
          transform: "translateX(-100%)"
        })
      ),
      transition("show => hide", animate("700ms ease-out")),
      transition("hide => show", animate("700ms ease-in"))
    ]),

    trigger("scrollAnimationSecond", [
      state(
        "show",
        style({
          opacity: 1,
          transform: "translateX(0)"
        })
      ),
      state(
        "hide",
        style({
          opacity: 0,
          transform: "translateX(100%)"
        })
      ),
      transition("show => hide", animate("700ms ease-out")),
      transition("hide => show", animate("700ms ease-in"))
    ])
  ]
})

export class AppComponent {
  state = "hide";

  constructor(public el: ElementRef) {}

  @HostListener("window:scroll", ["$event"])
  checkScroll() {
    const componentPosition = this.el.nativeElement.offsetTop;
    const scrollPosition = window.pageYOffset;

    if (scrollPosition + 700 >= componentPosition) {
     this.state = "show";
    } else {
      this.state = "hide";
    }
  }
}

time-line.component.ts：

import { Component, OnInit } from '@angular/core';
import { AppComponent } from '../app.component';

@Component({
  selector: 'app-time-line',
  templateUrl: './time-line.component.html',
  styleUrls: ['./time-line.component.css'],
})
export class TimeLineComponent implements OnInit {

  constructor() {
   }

  ngOnInit() {

  }

}

Answer 1

通常，您將所有動畫設置在一個或多個文件中，例如：

animation.main.ts

export const formStateMainTrigger = trigger("scrollAnimationMain", [
  state(
    "show",
    style({
      opacity: 1,
      transform: "translateX(0)"
    })
  ),
  state(
    "hide",
    style({
      opacity: 0,
      transform: "translateX(-100%)"
    })
  ),
  transition("show => hide", animate("700ms ease-out")),
  transition("hide => show", animate("700ms ease-in"))
]);

export const formState2Trigger = trigger("scrollAnimationSecond", [
  state(
    "show",
    style({
        opacity: 1,
        transform: "translateX(0)"
    })
  ),
  state(
    "hide",
      style({
        opacity: 0,
        transform: "translateX(100%)"
      })
    ),
    transition("show => hide", animate("700ms ease-out")),
    transition("hide => show", animate("700ms ease-in"))
]);

比你可以像導入

import { formStateMainTrigger } from './animations.main';
animations: [formStateMainTrigger]

對於組件內部的方法，您可以執行以下操作：

export function checkScroll(el) {
    const componentPosition = el.nativeElement.offsetTop;
    const scrollPosition = window.pageYOffset;
    if (scrollPosition + 700 >= componentPosition) {
     return "show";
    } 
    return "hide";
}