Skip to content

Commit 27a4721

Browse files
committed
feat: add dash animation to link
1 parent b0f96b9 commit 27a4721

File tree

2 files changed

+22
-2
lines changed

2 files changed

+22
-2
lines changed

src/animateNode.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,23 @@ function animateNode(
2121
el.attributes.labels[0].attrs.text.text.split(",").includes(symbol)
2222
);
2323

24-
if (currentLink) currentLink.attr("line/stroke", "orange");
24+
if (currentLink) {
25+
currentLink.attr("line/stroke", "orange");
26+
const svg = document.querySelector(`g[model-id="${currentLink.id}"]`);
27+
svg.classList.add("current");
28+
}
2529

2630
setTimeout(() => {
2731
data.attr("body/stroke", "black");
2832

2933
if (!isFinal) data.attr("body/fill", "#ffffff");
3034
else data.attr("body/fill", FILL_NODE_FINAL);
3135

32-
if (currentLink) currentLink.attr("line/stroke", "black");
36+
if (currentLink) {
37+
currentLink.attr("line/stroke", "black");
38+
const svg = document.querySelector(`g[model-id="${currentLink.id}"]`);
39+
svg.classList.remove("current");
40+
}
3341

3442
document
3543
.querySelector("#string-out")

src/styles.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,18 @@ input:focus {
1212
border-bottom: 2px #e5e7eb solid !important;
1313
}
1414

15+
.joint-link.current path {
16+
stroke-dasharray: 5;
17+
stroke-dashoffset: 10;
18+
animation: dash 0.5s infinite linear;
19+
}
20+
21+
@keyframes dash {
22+
to {
23+
stroke-dashoffset: 0;
24+
}
25+
}
26+
1527
.split {
1628
display: flex;
1729
flex-direction: row;

0 commit comments

Comments
 (0)