blob: 2e8061a19f45caade6a4a98acf85fa57c3d20388 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
import * as React from 'react';
import { keyframes, styled } from '../../style/theme';
const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
from {
position: relative;
top: ${fromY};
}
to {
position: relative;
top: ${toY};
}
`;
export interface SlideAnimationProps {
keyframes: string;
animationType: string;
animationDirection?: string;
}
export const SlideAnimation =
styled.div <
SlideAnimationProps >
`
animation-name: ${props => props.keyframes};
animation-duration: 0.3s;
animation-timing-function: ${props => props.animationType};
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: ${props => props.animationDirection || 'none'};
position: relative;
z-index: -1;
`;
export interface SlideAnimationComponentProps {
downY: string;
}
export const SlideUpAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
<SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
{props.children}
</SlideAnimation>
);
export const SlideDownAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
<SlideAnimation
animationDirection="forwards"
animationType="cubic-bezier(0.25, 0.1, 0.25, 1)"
keyframes={slideKeyframeGenerator('0px', props.downY)}
>
{props.children}
</SlideAnimation>
);
export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps {
delayMs: number;
}
interface SlideUpAndDownState {
slideState: 'up' | 'down';
}
export class SlideUpAndDownAnimation extends React.Component<SlideUpAndDownAnimationProps, SlideUpAndDownState> {
private _timeoutId: number | undefined;
constructor(props: SlideUpAndDownAnimationProps) {
super(props);
this._timeoutId = undefined;
this.state = {
slideState: 'up',
};
}
public render(): React.ReactNode {
return this._renderSlide();
}
public componentDidMount(): void {
this._timeoutId = window.setTimeout(() => {
this.setState({
slideState: 'down',
});
}, this.props.delayMs);
return;
}
public componentWillUnmount(): void {
if (this._timeoutId) {
window.clearTimeout(this._timeoutId);
}
}
private readonly _renderSlide = (): React.ReactNode => {
const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent;
return <SlideComponent downY={this.props.downY}>{this.props.children}</SlideComponent>;
};
}
|
