angular / angular/components

CDK Drag-Drop - Animation when entering and exiting items

Open
#17,920 2 comments 24 reactions 0 assignees View on GitHub
area: cdk/drag-drop feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Feature Description

When we delete an action, add or even pass an item from one container to another, the item goes sharply pushing forward the others, and it would be much better to have some animation in entering and exiting items, I even tried to put myself, but I noticed that the library uses the position of the items at the time of the drop to calculate the movement, so it would even animate, but then dragging would get weird. Having such a function would make the animations much more consistent and beautiful.

#### Use Case

When CSS animation is enabled it appears incomplete when deleting, adding or moving items. This would improve the look of any implementation that uses transition CSS animation.

Contributor guide

Open the contributing guide

Research direction

Start by locating the CDK Drag-Drop implementation and its existing transition or animation handling; the issue does not name specific files or tests. Define how entering, exiting, adding, deleting, and moving items should animate without making dragging calculations behave incorrectly. Done means the behavior is implemented consistently and covered by relevant tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.