LayoutTree: Add very-fast-fade.

cybersemics · Nov 17, 2024 · 0eff9c0 · 0eff9c0
1 parent 0ec72f9
commit 0eff9c0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/src/App.css b/src/App.css
@@ -23,6 +23,25 @@
   transition: opacity 0.2s ease-out;
 }
 
+/* react-transition-group animation: fade */
+.very-fast-fade-enter {
+  opacity: 0;
+}
+
+.very-fast-fade-enter-active {
+  opacity: 1;
+  transition: opacity 80ms ease-out;
+}
+
+.very-fast-fade-exit {
+  opacity: 1;
+}
+
+.very-fast-fade-exit-active {
+  opacity: 0;
+  transition: opacity 80ms ease-out;
+}
+
 /* react-transition-group animation: fade-slow-out */
 .fade-slow-out-enter {
   opacity: 0;

diff --git a/src/components/LayoutTree.tsx b/src/components/LayoutTree.tsx
@@ -792,7 +792,7 @@ const LayoutTree = () => {
                   nodeRef={nodeRef}
                   key={key}
                   timeout={durations.get('veryFastDuration')}
-                  classNames='fade'
+                  classNames='very-fast-fade'
                   unmountOnExit
                 >
                   <div