From cda78c66e4f7e0712e1dabd9865df04b3946ed73 Mon Sep 17 00:00:00 2001 From: Aaron Louie Date: Fri, 18 Oct 2019 16:28:15 -0400 Subject: [PATCH] Uses reusable animation and scroll method --- src/app/about-us/about-us.component.ts | 35 +++----------------------- src/app/welcome/welcome.component.ts | 33 +++--------------------- 2 files changed, 8 insertions(+), 60 deletions(-) diff --git a/src/app/about-us/about-us.component.ts b/src/app/about-us/about-us.component.ts index 1db37e1..6542100 100644 --- a/src/app/about-us/about-us.component.ts +++ b/src/app/about-us/about-us.component.ts @@ -1,38 +1,14 @@ import {Component, ElementRef, HostListener, OnInit} from '@angular/core'; import {ApiService} from '../api.service'; import {Capability} from '../interfaces'; -import {animate, state, style, transition, trigger, useAnimation} from '@angular/animations'; -import {fadeIn, fadeOut} from '../animation'; -import {isEven} from '../util'; +import {animations} from '../animation'; +import {getScrollState, isEven} from '../util'; @Component({ selector: 'app-about-us', templateUrl: './about-us.component.html', styleUrls: ['./about-us.component.scss'], - animations: [ - trigger('fadeInOut', [ - transition('void <=> *', useAnimation(fadeIn)), - transition('* <=> void', useAnimation(fadeOut)) - ]), - trigger('scrollAnimation', [ - state( - 'show', - style({ - opacity: 1, - zIndex: 0 - }) - ), - state( - 'hide', - style({ - opacity: 0, - zIndex: 0 - }) - ), - transition('show => hide', animate('700ms ease-out')), - transition('hide => show', animate('700ms ease-in')) - ]) - ] + animations: animations }) export class AboutUsComponent implements OnInit { capabilities: Capability[]; @@ -48,9 +24,6 @@ export class AboutUsComponent implements OnInit { @HostListener('window:scroll', ['$event']) checkScroll() { - const hOffset = window.innerHeight / 2; - const componentPosition = this.el.nativeElement.offsetTop; - const scrollPosition = window.pageYOffset + hOffset; - this.state = scrollPosition >= componentPosition ? 'show' : 'hide'; + this.state = getScrollState(this.el); } } diff --git a/src/app/welcome/welcome.component.ts b/src/app/welcome/welcome.component.ts index 4314e4b..fd68bd9 100644 --- a/src/app/welcome/welcome.component.ts +++ b/src/app/welcome/welcome.component.ts @@ -7,36 +7,14 @@ import { trigger, useAnimation } from '@angular/animations'; -import { fadeIn, fadeOut } from '../animation'; +import {animations, fadeIn, fadeOut} from '../animation'; +import {getScrollState} from '../util'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrls: ['./welcome.component.scss'], - animations: [ - trigger('fadeInOut', [ - transition('void <=> *', useAnimation(fadeIn)), - transition('* <=> void', useAnimation(fadeOut)) - ]), - trigger('scrollAnimation', [ - state( - 'show', - style({ - opacity: 1, - zIndex: 0 - }) - ), - state( - 'hide', - style({ - opacity: 0, - zIndex: 0 - }) - ), - transition('show => hide', animate('700ms ease-out')), - transition('hide => show', animate('700ms ease-in')) - ]) - ] + animations: animations }) export class WelcomeComponent implements OnInit { state = 'hide'; @@ -47,9 +25,6 @@ export class WelcomeComponent implements OnInit { @HostListener('window:scroll', ['$event']) checkScroll() { - const hOffset = window.innerHeight / 2; - const componentPosition = this.el.nativeElement.offsetTop; - const scrollPosition = window.pageYOffset + hOffset; - this.state = scrollPosition >= componentPosition ? 'show' : 'hide'; + this.state = getScrollState(this.el); } }