Switch expand transition to use vanilla CSS transition instead of rea…

…ct-spring
Daniel15 · Apr 26, 2020 · 0e44632 · 0e44632
1 parent 449df04
commit 0e44632
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 37 deletions.
diff --git a/src/DnsTools.Web/ClientApp/package.json b/src/DnsTools.Web/ClientApp/package.json
@@ -27,7 +27,6 @@
     "react-helmet": "^5.2.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
-    "react-spring": "^8.0.27",
     "resize-observer-polyfill": "^1.5.1",
     "source-map-explorer": "^2.1.1",
     "typescript": "3.6.4",

diff --git a/src/DnsTools.Web/ClientApp/src/components/ExpandTransition.tsx b/src/DnsTools.Web/ClientApp/src/components/ExpandTransition.tsx
@@ -1,8 +1,12 @@
-import React, {memo, DetailedHTMLProps, HTMLAttributes} from 'react';
-import {useSpring, animated} from 'react-spring';
+import React, {
+  useState,
+  memo,
+  DetailedHTMLProps,
+  HTMLAttributes,
+  useLayoutEffect,
+} from 'react';
 
 import useDimensions from '../hooks/useDimensions';
-import usePrevious from '../hooks/usePrevious';
 
 type Props = Readonly<{
   children: React.ReactNode;
@@ -16,28 +20,44 @@ type Props = Readonly<{
  */
 export default memo(function ExpandTransition(props: Props) {
   const {children, isExpanded, ...otherProps} = props;
-  const previouslyExpanded = usePrevious(props.isExpanded);
+  const [hasCompletedAnimation, setHasCompletedAnimation] = useState<boolean>(
+    true,
+  );
+  const [renderAsExpanded, setRenderAsExpanded] = useState<boolean>(
+    props.isExpanded,
+  );
   const [ref, dimensions] = useDimensions<HTMLDivElement>();
-  // @ts-ignore https://github.com/react-spring/react-spring/issues/912
-  const {height, opacity} = useSpring({
-    from: {height: 0, opacity: 0},
-    to: {
-      height: isExpanded ? dimensions.height : 0,
-      opacity: isExpanded ? 1 : 0,
-    },
-  });
+
+  useLayoutEffect(() => {
+    setHasCompletedAnimation(false);
+    // Allow it to render in the old state for one frame (to get rid of the `auto`),
+    // then re-render with the new expanded state, to start the animation.
+    setTimeout(() => setRenderAsExpanded(props.isExpanded), 0);
+  }, [props.isExpanded]);
+
+  let renderHeight: number | string = renderAsExpanded ? dimensions.height : 0;
+  if (props.isExpanded && hasCompletedAnimation) {
+    // If we're re-rendering while expanded, don't mess with the height
+    // (prevents animating this expand area if there's a nested expand area
+    // within it that's expanding)
+    renderHeight = 'auto';
+  }
 
   return (
-    <animated.div
+    <div
       className="expand-container"
       style={{
-        opacity,
-        // If we're re-rendering while expanded, don't mess with the height
-        height: isExpanded && previouslyExpanded ? 'auto' : height,
+        height: renderHeight,
+        opacity: renderAsExpanded ? 1 : 0,
+      }}
+      onTransitionEnd={() => {
+        setHasCompletedAnimation(true);
       }}>
-      <div {...otherProps} ref={ref}>
-        {props.children}
-      </div>
-    </animated.div>
+      {(props.isExpanded || !hasCompletedAnimation) && (
+        <div ref={ref}>
+          <div {...otherProps}>{props.children}</div>
+        </div>
+      )}
+    </div>
   );
 });
diff --git a/src/DnsTools.Web/ClientApp/src/index.scss b/src/DnsTools.Web/ClientApp/src/index.scss
@@ -144,6 +144,7 @@ $popover-colors: 'primary' $primary, 'success' $success;
 .expand-container {
 	overflow: hidden;
 	will-change: height, opacity, transform;
+	transition: height 450ms cubic-bezier(0.25, 1, 0.5, 1), opacity 400ms cubic-bezier(0.25, 1, 0.5, 1) 50ms;
 }
 
 .sortable-header {

diff --git a/src/DnsTools.Web/ClientApp/yarn.lock b/src/DnsTools.Web/ClientApp/yarn.lock
@@ -867,13 +867,6 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.3.1":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1"
-  integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==
-  dependencies:
-    regenerator-runtime "^0.13.2"
-
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
@@ -8603,7 +8596,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9027,14 +9020,6 @@ react-snap@1.23.0:
     serve-static "1.13.2"
     sourcemapped-stacktrace-node "2.1.8"
 
-react-spring@^8.0.27:
-  version "8.0.27"
-  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
-  integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    prop-types "^15.5.8"
-
 react@^16.10.2:
   version "16.10.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.10.2.tgz#a5ede5cdd5c536f745173c8da47bda64797a4cf0"