从Angular中其他不同组件中的一个组件实现动画功能

Question

I am trying to implement an animation function which I have written in my app.component.ts into different other components. In effect, I would only like to have this one function and implement it in a few other components, rather than writing the function over and over again. I don't know if it is the right way to execute this or if there is a better way?

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

Usually you set all your animations in one o more files like:

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"))
]);

than you can import them like

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

For the method inside the component you could do like:

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