angular2-draggable icon indicating copy to clipboard operation
angular2-draggable copied to clipboard

drag when has animations in the div become very slow

Open tumblingG opened this issue 4 years ago • 1 comments

Steps to reproduce

when I use the drag function, there are some animation divs in the content, the drag processes become very slow.

.drag-content {
  width: 100px;
  height: 100px;
  border: 1px solid gray;
  .animation-dot {
    width: 6px;
    height: 6px;
    background-color: red;
    animation: animationTodoFlowStatus 1.2s ease-in-out infinite;
  }
}

@keyframes animationTodoFlowStatus {
  0% {
    transform: scale(0.8);
    opacity: 0.5
  }

  to {
    transform: scale(2.4);
    opacity: 0
  }
}

<div class="drag-content" ngDraggable>
  Hello
  <div class="animation-dot"></div>
  <div class="animation-dot"></div>
  <div class="animation-dot"></div>
  <div class="animation-dot"></div>
</div>

What is expected?

I hope animation will not influence the drag

tumblingG avatar Nov 05 '19 07:11 tumblingG

I got exactly the same issue! Was about to report this issue and found yours. Very annoying since I use the draggable element as a chat window and all my messages have an entry animation.

Any workaround?

xdrago1 avatar Dec 09 '19 20:12 xdrago1