Drag and Drop Animation Animate the CDK Drag and Drop events with CSS transitions

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.


*Enrollment provides full access to this course (and updates) for life.

Or Signup for Unlimited PRO Access

Animate the the CDK Drag & Drop elements using CSS transitions.

Full Styles

Animation Styles

Board List

file_type_html 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

file_type_html 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; }

Q&A Chat