angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

bug(drag-and-drop): Drag and drop not animating #29876

Closed atomicrobokid closed 2 weeks ago

atomicrobokid commented 2 weeks ago

Is this a regression?

The previous version in which this bug was not present was

No response

Description

https://material.angular.io/cdk/drag-drop/examples

This may or may not be a bug i apologise, but I can't seem to for the life of me get the drag and drop functionality to animate when dragging about.

The drag/drop functionality itself works fine, but I can see in that demo above that when you drag, the cdkDrag element gets css applied such as transform: translate3d(...) etc but i get no such css applied.

Reproduction

StackBlitz link: Steps to reproduce:

Expected Behavior

Css to transition when dragging is applied

Actual Behavior

No css is applied,

Environment

atomicrobokid commented 2 weeks ago

Urgh, nevermind, found it buried in the docs for the "mixed" mode:

It has the advantage of allowing the items to wrap to the next line, but it cannot animate the sorting action.

Any plans to support animations with mixed?

crisbeto commented 2 weeks ago

There are no plans to support animations for mixed orientation. The problem is that we need to be able to predict the size and position of the elements after they're re-ordered and that can be difficult with some CSS layouts.