代码之家 › 专栏 › 技术社区 › Corné

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

angular-animations components typescript angular

Corné · 技术社区 · 6 年前

我正在尝试实现一个动画函数,我已经在我的 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";
    }
  }
}

时间线组件:

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() {

  }

}

1 回复 | 直到 5 年前

Whisher 6 年前

通常设置所有动画在一个或多个文件中,例如:

动画.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";
}