[DragOverlay] Dont do drop animation if its not moved?
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
As the title said, I tried with this:
```ts
const dropAnimation: DropAnimation = async (context) => {
const { feedbackElement, translate, moved } = context;
if (!moved) return;
const duration = 250;
const start = performance.now();
const ease = cubicBezier(0.25, 0.1, 0.25, 1.0);
await new Promise((resolve) => {
function tick(now: number) {
const valid = feedbackElement instanceof HTMLElement;
const time = Math.min((now - start) / duration, 1);
const eased = ease(time);
if (!valid) return;
const x = translate.x * (1 - eased);
const y = translate.y * (1 - eased);
feedbackElement.style.setProperty("--dnd-translate", `${x}px ${y}px`);
if (time < 1) requestAnimationFrame(tick);
if (time >= 1) resolve();
}
requestAnimationFrame(tick);
});
};
```
But it come with edge case I cant seem to fix, for example if I sort my element and the position changed, the overlay will be drop to its old position. Why I want to disable drop animation if its not moved? In my opinion if its not moved it will still ran the animation it will look like it "lagged" even though it run a drop animation, like its standing still. Have any solve for this?
Contributor guide
Research direction
Start with the DragOverlay dropAnimation context, especially the moved, translate, and feedbackElement values shown in the issue, and reproduce the sortable-position-change case. Trace how the overlay returns to its previous position when the item moved, then verify that stationary overlays do not visibly animate while moved overlays retain their drop behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100