app: Ajout animations entrée/sortie

app/src/Graph.js

@@ -1,4 +1,5 @@
 import React, {useState, useRef, useEffect} from 'react';
+import {TransitionGroup, CSSTransition} from 'react-transition-group';
 import Springy from 'springy';
 
 /**
@@ -204,7 +205,7 @@ const Graph = ({nodes, edges, render}) =>
                 dragPoint = layout.nodePoints[dragElement.getAttribute('data-node-id')];
                 dragPoint.m = Infinity;
 
-                dragElement.classList.add('Graph_node--dragging');
+                dragElement.classList.add('Graph_node-dragging');
 
                 dragDelta = dragPoint.p.subtract(screenToCoords(screen));
             }
@@ -228,7 +229,7 @@ const Graph = ({nodes, edges, render}) =>
                 dragPoint.m = 1;
                 dragPoint = null;
 
-                dragElement.classList.remove('Graph_node--dragging');
+                dragElement.classList.remove('Graph_node-dragging');
                 dragElement = null;
 
                 dragDelta = new Springy.Vector(0, 0);
@@ -250,21 +251,38 @@ const Graph = ({nodes, edges, render}) =>
     return (
         <div ref={graphParent} className="Graph">
             <svg className="Graph_edgesContainer">
+                <TransitionGroup component={null}>
                     {edges.map(edge => (
-                    <line
+                        <CSSTransition
                             key={getEdgeId(...edge)}
+                            timeout={500}
+                            classNames="Graph_element"
+                        >
+                            <line
                                 data-edge-id={getEdgeId(...edge)}
+                                className="Graph_edge"
                             />
+                        </CSSTransition>
                     ))}
+                </TransitionGroup>
             </svg>
 
+            <TransitionGroup component={null}>
                 {nodes.map(id => (
-                <span
+                    <CSSTransition
                         key={id}
+                        timeout={500}
+                        classNames="Graph_element"
+                    >
+                        <span
                             data-node-id={id}
                             className="Graph_node"
-                >{render(id)}</span>
+                        >
+                            {render(id)}
+                        </span>
+                    </CSSTransition>
                 ))}
+            </TransitionGroup>
 
             {nodes.length === 0
                 ? <span className="Graph_empty">Aucun résultat</span>

app/style/style.css

@@ -15,6 +15,16 @@
 
     --animation-ease-out: cubic-bezier(0.075, 0.82, 0.165, 1);
     --animation-short: .3s;
+
+    --shadow-normal:
+        0 1px 1px 0 rgba(0, 0, 0, 0.14),
+        0 2px 1px -1px rgba(0, 0, 0, 0.12),
+        0 1px 3px 0 rgba(0, 0, 0, 0.20);
+
+    --shadow-high:
+        0 4px 5px 0 rgba(0, 0, 0, 0.14),
+        0 1px 10px 0 rgba(0, 0, 0, 0.12),
+        0 2px 4px -1px rgba(0, 0, 0, 0.20);
 }
 
 body, html
@@ -84,20 +94,17 @@ input
     flex-wrap: wrap;
     align-items: center;
 
-    border: 2px solid var(--color-dark);
     border-radius: 2px;
     background: white;
 
+    box-shadow: var(--shadow-normal);
+
     transition: box-shadow var(--animation-short) var(--animation-ease-out);
 }
 
 .TermInput:focus-within
 {
-    box-shadow:
+    box-shadow: var(--shadow-high);
-        -1px -1px 0px var(--color-dark),
-        1px -1px 0px var(--color-dark),
-        1px 1px 0px var(--color-dark),
-        -1px 1px 0px var(--color-dark);
 }
 
 .TermInput_term
@@ -156,11 +163,6 @@ input
     height: 100%;
 }
 
-.Graph_edgesContainer line
-{
-    stroke: var(--color-dark);
-}
-
 .Graph_node
 {
     position: absolute;
@@ -169,19 +171,43 @@ input
     display: block;
     transform: translate(-50%, -50%);
 
-    box-shadow:
+    box-shadow: var(--shadow-normal);
-        0 1px 1px 0 rgba(0, 0, 0, 0.14),
-        0 2px 1px -1px rgba(0, 0, 0, 0.12),
-        0 1px 3px 0 rgba(0, 0, 0, 0.20);
-
     transition: box-shadow var(--animation-short) var(--animation-ease-out);
 }
 
-.Graph_node--dragging
+.Graph_edge
 {
-    /* box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20); */
+    stroke: var(--color-dark);
-    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
+}
-    /* box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20); */
+
+.Graph_node-dragging
+{
+    box-shadow: var(--shadow-high);
+}
+
+.Graph_element-exit, .Graph_element-enter
+{
+    transition: opacity var(--animation-short) var(--animation-ease-out);
+}
+
+.Graph_element-enter
+{
+    opacity: 0;
+}
+
+.Graph_element-enter-active
+{
+    opacity: 1;
+}
+
+.Graph_element-exit
+{
+    opacity: 1;
+}
+
+.Graph_element-exit-active
+{
+    opacity: 0;
 }
 
 .Graph_empty

package-lock.json

@@ -2329,6 +2329,11 @@
         "cssom": "0.3.x"
       }
     },
+    "csstype": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
+      "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ=="
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -2492,6 +2497,15 @@
         "randombytes": "^2.0.0"
       }
     },
+    "dom-helpers": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz",
+      "integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "csstype": "^2.6.7"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -5943,6 +5957,17 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
       "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
+    "react-transition-group": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+      "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "readable-stream": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",

package.json

@@ -17,6 +17,7 @@
     "@babel/runtime": "^7.7.4",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-transition-group": "^4.3.0",
     "springy": "^2.8.0"
   }
 }