blob: 9a30685ba923bc5b538506d81cb7a5f1a01c7ce4 (
plain)
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
|
/**
* Change the element classes to hide it with a slide out left animation.
* @param {HTMLElement} el - The HTMLElement to hide.
*/
function hideToLeft(el) {
el?.classList.remove('slide-in--left');
el?.classList.add('slide-out--left');
setTimeout(() => {
el?.classList.add('hide');
}, 800);
}
/**
* Change the element classes to show it with a slide in left animation.
* @param {HTMLElement} el - The HTMLElement to show.
*/
function showFromLeft(el) {
el?.classList.remove('slide-out--left');
el?.classList.remove('hide');
el?.classList.add('slide-in--left');
}
/**
* Change the element classes to hide it with a slide out bottom animation.
* @param {HTMLElement} el - The HTMLElement to hide.
*/
function hideToBottom(el) {
el?.classList.remove('slide-in--up');
el?.classList.add('slide-out--bottom');
setTimeout(() => {
el?.classList.add('hide');
}, 800);
}
/**
* Change the element classes to show it with a slide in up animation.
* @param {HTMLElement} el - The HTMLElement to show.
*/
function showFromBottom(el) {
el?.classList.remove('slide-out--bottom');
el?.classList.remove('hide');
el?.classList.add('slide-in--up');
}
export { hideToLeft, showFromLeft, hideToBottom, showFromBottom };
|
