在 Angular 中从一个组件在不同的其他组件中实现动画功能
Implement animation function from one component in different other components in Angular
我正在尝试将我在 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";
}
}
}
时间-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() {
}
}
通常你设置所有的动画
在一个或多个文件中,例如:
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";
}
我正在尝试将我在 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";
}
}
}
时间-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() {
}
}
通常你设置所有的动画 在一个或多个文件中,例如:
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";
}