From fd010ed75e338906aefd401438acbb972ad50ff4 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 1 Aug 2021 21:08:42 +0100
Subject: [PATCH] Closing animation for settings.
---
src/pages/settings/GenericSettings.tsx | 24 +++++++++++++++++-------
src/pages/settings/Settings.module.scss | 4 ++++
2 files changed, 21 insertions(+), 7 deletions(-)
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index b9c9f54..42dd9f9 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -3,8 +3,9 @@ import { Helmet } from "react-helmet";
import { Switch, useHistory, useParams } from "react-router-dom";
import styles from "./Settings.module.scss";
+import classNames from "classnames";
import { Text } from "preact-i18n";
-import { useContext, useEffect } from "preact/hooks";
+import { useContext, useEffect, useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
@@ -48,12 +49,17 @@ export function GenericSettings({
const theme = useContext(ThemeContext);
const { page } = useParams<{ page: string }>();
+ const [closing, setClosing] = useState(false);
function exitSettings() {
- if (history.length > 0) {
- history.goBack();
- } else {
- history.push("/");
- }
+ setClosing(true);
+
+ setTimeout(() => {
+ if (history.length > 0) {
+ history.goBack();
+ } else {
+ history.push("/");
+ }
+ }, 100);
}
useEffect(() => {
@@ -68,7 +74,11 @@ export function GenericSettings({
}, []);
return (
- <div className={styles.settings} data-mobile={isTouchscreenDevice}>
+ <div
+ className={classNames(styles.settings, {
+ [styles.closing]: closing,
+ })}
+ data-mobile={isTouchscreenDevice}>
<Helmet>
<meta
name="theme-color"
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index b34ddd9..7dc73b2 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -69,6 +69,10 @@
height: 100%;
position: fixed;
animation: open 0.18s ease-out, opacity 0.18s;
+
+ &.closing {
+ animation: close 0.18s ease-in;
+ }
}
.settings {
--
GitLab