app: Ajout animations entrée/sortie

2019-12-02 01:20:27 -05:00 · 2019-12-02 01:20:27 -05:00 · 6cf7de6426
parent 1f1440414c
commit 6cf7de6426
4 changed files with 105 additions and 35 deletions
--- a/app/src/Graph.js
+++ b/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">
-                {edges.map(edge => (
-                    <line
-                        key={getEdgeId(...edge)}
-                        data-edge-id={getEdgeId(...edge)}
-                    />
-                ))}
+                <TransitionGroup component={null}>
+                    {edges.map(edge => (
+                        <CSSTransition
+                            key={getEdgeId(...edge)}
+                            timeout={500}
+                            classNames="Graph_element"
+                        >
+                            <line
+                                data-edge-id={getEdgeId(...edge)}
+                                className="Graph_edge"
+                            />
+                        </CSSTransition>
+                    ))}
+                </TransitionGroup>
            </svg>

-            {nodes.map(id => (
-                <span
-                    key={id}
-                    data-node-id={id}
-                    className="Graph_node"
-                >{render(id)}</span>
-            ))}
+            <TransitionGroup component={null}>
+                {nodes.map(id => (
+                    <CSSTransition
+                        key={id}
+                        timeout={500}
+                        classNames="Graph_element"
+                    >
+                        <span
+                            data-node-id={id}
+                            className="Graph_node"
+                        >
+                            {render(id)}
+                        </span>
+                    </CSSTransition>
+                ))}
+            </TransitionGroup>

            {nodes.length === 0
                ? <span className="Graph_empty">Aucun résultat</span>
--- a/app/style/style.css
+++ b/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:
-        -1px -1px 0px var(--color-dark),
-        1px -1px 0px var(--color-dark),
-        1px 1px 0px var(--color-dark),
-        -1px 1px 0px var(--color-dark);
+    box-shadow: var(--shadow-high);
 }

 .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:
-        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);
-
+    box-shadow: var(--shadow-normal);
    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); */
-    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); */
+    stroke: var(--color-dark);
+}
+
+.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
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
  }
 }