sartography
/
sartography-website
mirror of https://github.com/sartography/sartography-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Uses reusable animation and scroll method

This commit is contained in:
Aaron Louie 2019-10-18 16:28:15 -04:00
parent 5c72ece46a
commit cda78c66e4
2 changed files with 8 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/app/about-us/about-us.component.ts
View File

@ -1,38 +1,14 @@
import {Component, ElementRef, HostListener, OnInit} from '@angular/core'; import {Component, ElementRef, HostListener, OnInit} from '@angular/core';
import {ApiService} from '../api.service'; import {ApiService} from '../api.service';
import {Capability} from '../interfaces'; import {Capability} from '../interfaces';
import {animate, state, style, transition, trigger, useAnimation} from '@angular/animations'; import {animations} from '../animation';
import {fadeIn, fadeOut} from '../animation'; import {getScrollState, isEven} from '../util';
import {isEven} from '../util';
@Component({ @Component({
selector: 'app-about-us', selector: 'app-about-us',
templateUrl: './about-us.component.html', templateUrl: './about-us.component.html',
styleUrls: ['./about-us.component.scss'], styleUrls: ['./about-us.component.scss'],
animations: [ animations: 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'))
])
]
}) })
export class AboutUsComponent implements OnInit { export class AboutUsComponent implements OnInit {
capabilities: Capability[]; capabilities: Capability[];
@ -48,9 +24,6 @@ export class AboutUsComponent implements OnInit {
@HostListener('window:scroll', ['$event']) @HostListener('window:scroll', ['$event'])
checkScroll() { checkScroll() {
const hOffset = window.innerHeight / 2; this.state = getScrollState(this.el);
const componentPosition = this.el.nativeElement.offsetTop;
const scrollPosition = window.pageYOffset + hOffset;
this.state = scrollPosition >= componentPosition ? 'show' : 'hide';
} }
} }

33
src/app/welcome/welcome.component.ts
View File

@ -7,36 +7,14 @@ import {
trigger, trigger,
useAnimation useAnimation
} from '@angular/animations'; } from '@angular/animations';
import { fadeIn, fadeOut } from '../animation'; import {animations, fadeIn, fadeOut} from '../animation';
import {getScrollState} from '../util';
@Component({ @Component({
selector: 'app-welcome', selector: 'app-welcome',
templateUrl: './welcome.component.html', templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.scss'], styleUrls: ['./welcome.component.scss'],
animations: [ animations: 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'))
])
]
}) })
export class WelcomeComponent implements OnInit { export class WelcomeComponent implements OnInit {
state = 'hide'; state = 'hide';
@ -47,9 +25,6 @@ export class WelcomeComponent implements OnInit {
@HostListener('window:scroll', ['$event']) @HostListener('window:scroll', ['$event'])
checkScroll() { checkScroll() {
const hOffset = window.innerHeight / 2; this.state = getScrollState(this.el);
const componentPosition = this.el.nativeElement.offsetTop;
const scrollPosition = window.pageYOffset + hOffset;
this.state = scrollPosition >= componentPosition ? 'show' : 'hide';
} }
} }