-
Notifications
You must be signed in to change notification settings - Fork 0
/
animations.ts
116 lines (98 loc) · 2.58 KB
/
animations.ts
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import { AnyFunction } from './functions'
import { createRAF } from './raf'
import { useTimingFunction, TimingFunction } from './useTimingFunction'
const defalutDuration = 2 * 1000
// Basic animation functions options.
export type AnimationFnOptions = {
duration?: number
timingFunction?: TimingFunction
callback?: AnyFunction
}
export type FadeFnOptions = AnimationFnOptions & {
startOpacity?: number
startDisplay?: string
endOpacity?: number
endDisplay?: string
}
/**
* Let dom element fade out.
*
* @param el Dom element.
* @param options Options.
*/
export function fadeOut(el: HTMLElement, options: FadeFnOptions = {}): void {
const computedStyle = getComputedStyle(el)
const {
duration = defalutDuration,
timingFunction,
callback,
startOpacity = computedStyle.opacity ? parseFloat(computedStyle.opacity) : 1,
startDisplay = computedStyle.display,
endOpacity = 0,
endDisplay = 'none'
} = options
el.style.opacity = startOpacity.toString()
el.style.display = startDisplay
const startTime = Date.now()
function fade() {
const now = Date.now()
const time = now - startTime
const nextOpacity = useTimingFunction(
Math.min(time, duration),
duration,
startOpacity,
endOpacity,
timingFunction
)
el.style.opacity = nextOpacity.toString()
if (time < duration) {
createRAF(fade)
} else {
el.style.opacity = endOpacity.toString()
el.style.display = endDisplay
if (callback) callback()
}
}
createRAF(fade, 0)
}
/**
* Let element fade in.
*
* @param el DOM element.
* @param options Options.
*/
export function fadeIn(el: HTMLElement, options: FadeFnOptions = {}): void {
const computedStyle = getComputedStyle(el)
const {
duration = defalutDuration,
timingFunction,
callback,
startOpacity = computedStyle.opacity ? parseFloat(computedStyle.opacity) : 0,
startDisplay = computedStyle.display,
endOpacity = 1,
endDisplay = ''
} = options
el.style.opacity = startOpacity.toString()
el.style.display = startDisplay
const startTime = Date.now()
function fade() {
const now = Date.now()
const time = now - startTime
const nextOpacity = useTimingFunction(
Math.min(time, duration),
duration,
startOpacity,
endOpacity,
timingFunction
)
el.style.opacity = nextOpacity.toString()
if (time < duration) {
createRAF(fade)
} else {
el.style.opacity = endOpacity.toString()
el.style.display = endDisplay
if (callback) callback()
}
}
createRAF(fade, 0)
}