🍱 Drag and Drop Animation
Animate the CDK Drag and Drop events with CSS transitions
Animate the the CDK Drag & Drop elements using CSS transitions.
Full Styles
Animation Styles
Board List
board-list.component.scss
.cdk-drag-placeholder {
opacity: 0.2;
width: 350px;
border: 5px dashed gray;
margin: 0 10px;
}
.cdk-drag-animating {
transition: transform 300ms ease;
}
.cdk-drop-list-dragging .cdk-drag {
transition: transform 300ms ease;
}
Board
board.component.scss
.cdk-drag-placeholder {
opacity: 0.5;
}
.cdk-drag-animating {
transition: transform 300ms ease;
}
.cdk-drop-list-dragging .cdk-drag {
transition: transform 300ms ease;
}
.blue { background: #71deff; color: black; }
.green { background: #36e9b6; color: black; }
.yellow { background: #ffcf44; color: black; }
.purple { background: #b15cff; }
.red { background: #e74a4a; }
.gray { background: gray; text-decoration: line-through; }