ASTOutline - Add react transition between changed nodes

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "react-redux": "^7.1.3",
+    "react-transition-group": "^4.3.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8"
   },
@@ -38,6 +39,7 @@
     "@types/react": "^16.3.13",
     "@types/react-dom": "^16.0.5",
     "@types/react-redux": "^7.1.7",
+    "@types/react-transition-group": "^4.2.3",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
     "cross-env": "^5.1.4",

src/components/ASTOutline/ASTOutline.css

@@ -0,0 +1,25 @@
+.enter {
+  opacity: 0.5;
+  transform: translateX(200px);
+  background-color: lightgreen;
+}
+.enter.enterActive {
+  opacity: 1;
+  transform: translateX(0);
+  transition: 1s all;
+}
+.enterDone {
+  background-color: lightgreen;
+}
+.exit {
+  opacity: 1;
+  transform: translateX(0);
+  background-color: pink;
+}
+.exit.exitActive {
+  opacity: 0.5;
+  transform: translateX(200px);
+  transition: 1s all;
+}
+.exitDone {
+}

src/components/ASTOutline/ASTOutline.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import { connect } from "react-redux";
 import * as ts from "typescript";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import { AppState } from "../../store";
 import { forEachChild, syntaxKindNameMapping, ObjectHash } from "../../utils";
 
+import styles from "./ASTOutline.css";
+
 interface ASTOutlineProps {
   node?: ts.Node;
   sourceFile?: ts.SourceFile;
@@ -18,20 +21,31 @@ function ASTOutline(props: ASTOutlineProps) {
 
   const output = (
     <>
-      <li>{syntaxKindNameMapping[node.kind]}</li>
-      <ul>
-        {forEachChild(node).map(childNode => (
-          <ASTOutlineConnected
-            key={ObjectHash.getHash(childNode)}
-            node={childNode}
-          />
-        ))}
-      </ul>
+      <li>
+        {syntaxKindNameMapping[node.kind]}
+        <ul>
+          <TransitionGroup>
+            {forEachChild(node).map(childNode => (
+              <CSSTransition
+                key={ObjectHash.getHash(childNode)}
+                timeout={1000}
+                classNames={styles}
+              >
+                <ASTOutlineConnected node={childNode} />
+              </CSSTransition>
+            ))}
+          </TransitionGroup>
+        </ul>
+      </li>
     </>
   );
 
   if (ts.isSourceFile(node)) {
-    return <ul>{output}</ul>;
+    return (
+      <ul>
+        <TransitionGroup>{output}</TransitionGroup>
+      </ul>
+    );
   } else {
     return output;
   }

yarn.lock

@@ -741,7 +741,7 @@
     "@babel/plugin-transform-react-jsx-self" "^7.8.3"
     "@babel/plugin-transform-react-jsx-source" "^7.8.3"
 
-"@babel/runtime@^7.5.5":
+"@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1"
   integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==
@@ -861,6 +861,13 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-transition-group@^4.2.3":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.3.tgz#4924133f7268694058e415bf7aea2d4c21131470"
+  integrity sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.3.13":
   version "16.9.17"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
@@ -3171,7 +3178,7 @@ cssstyle@^2.0.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.2.0:
+csstype@^2.2.0, csstype@^2.6.7:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
   integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==
@@ -3434,6 +3441,14 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821"
+  integrity sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    csstype "^2.6.7"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -7766,7 +7781,7 @@ promise@8.0.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.7.2:
+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==
@@ -8027,6 +8042,16 @@ react-scripts-ts@^3.1.0:
   optionalDependencies:
     fsevents "^1.1.3"
 
+react-transition-group@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
+  integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"