matteo/wikimedica-disease-search
matteo
/
wikimedica-disease-search
1
0
Fork 0
Code Issues 2 Pull Requests Releases Activity

app: Ajout animations entrée/sortie

This commit is contained in:
Mattéo Delabre 2019-12-02 01:20:27 -05:00
parent 1f1440414c
commit 6cf7de6426
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
4 changed files with 105 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/src/Graph.js
View File

@ -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>

66
app/style/style.css
View File

@ -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

25
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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"
}
}