app: Ajout animations entrée/sortie
This commit is contained in:
parent
1f1440414c
commit
6cf7de6426
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue