refactor(canvas): remove unused animation and optimize edge insertion timing
- Removed the unused CSS animation for edge insertion to streamline the codebase. - Updated the edge insertion reflow duration from 1297ms to 997ms for improved performance. - Refactored transition timing function for edge insertion to enhance animation smoothness. - Cleaned up related test cases to reflect the changes in edge insertion logic.
This commit is contained in:
@@ -145,17 +145,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ls-edge-insert-enter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
scale: 0.82;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ls-connection-line-marching {
|
||||
animation: ls-connection-dash-offset 0.4s linear infinite;
|
||||
}
|
||||
@@ -262,17 +251,52 @@
|
||||
.react-flow.canvas-edge-insert-reflowing .react-flow__node {
|
||||
transition-property: transform;
|
||||
transition-duration: var(--ls-edge-insert-reflow-duration, 1297ms);
|
||||
transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
|
||||
transition-timing-function: linear(
|
||||
0 0%,
|
||||
0.2718 2.5%,
|
||||
0.6464 5%,
|
||||
1 7.5%,
|
||||
1.25 10%,
|
||||
1.3641 12.5%,
|
||||
1.3536 15%,
|
||||
1.2575 17.5%,
|
||||
1.125 20%,
|
||||
1 22.5%,
|
||||
0.9116 25%,
|
||||
0.8713 27.5%,
|
||||
0.875 30%,
|
||||
0.909 32.5%,
|
||||
0.9558 35%,
|
||||
1 37.5%,
|
||||
1.0313 40%,
|
||||
1.0455 42.5%,
|
||||
1.0442 45%,
|
||||
1.0322 47.5%,
|
||||
1.0156 50%,
|
||||
1 52.5%,
|
||||
0.989 55%,
|
||||
0.9839 57.5%,
|
||||
0.9844 60%,
|
||||
0.9886 62.5%,
|
||||
0.9945 65%,
|
||||
1 67.5%,
|
||||
1.0039 70%,
|
||||
1.0057 72.5%,
|
||||
1.0055 75%,
|
||||
1.004 77.5%,
|
||||
1.002 80%,
|
||||
1 82.5%,
|
||||
0.9986 85%,
|
||||
0.998 87.5%,
|
||||
0.998 90%,
|
||||
0.9986 92.5%,
|
||||
0.9993 95%,
|
||||
1 97.5%,
|
||||
1 100%
|
||||
);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.react-flow__node.canvas-edge-insert-enter,
|
||||
.react-flow__node .canvas-edge-insert-enter {
|
||||
animation: ls-edge-insert-enter 300ms cubic-bezier(0.68, -0.6, 0.32, 1.6) both;
|
||||
transform-origin: center center;
|
||||
will-change: scale, opacity;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.react-flow.canvas-scissors-mode .react-flow__edge:not(.temp) .react-flow__edge-path {
|
||||
transition: none;
|
||||
@@ -281,13 +305,5 @@
|
||||
.react-flow.canvas-edge-insert-reflowing .react-flow__node {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.react-flow__node.canvas-edge-insert-enter,
|
||||
.react-flow__node .canvas-edge-insert-enter {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
will-change: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user