I am having trouble dragging a component with CSS transform animation applied to it. The drag functionality doesn't seem to work properly as the component only moves based on the animation and cannot be dragged. Is there any solution to make the drag feature work?
import * as React from "react";
import {
theComponent
} from "../style.css";
import Draggable from "react-draggable";
class DragMe extends React.Component {
render() {
return (
<Draggable
axis="both"
handle=".handle"
defaultPosition={{ x: 0, y: 0 }}
position={null}
grid={[25, 25]}
scale={1}
onStart={this.handleStart}
onDrag={this.handleDrag}
onStop={this.handleStop}
>
<div className={theComponent + " handle"}>
<p>Drag Me!</p>
</div>
</Draggable>
);
}
}. theComponent{
animation: moveAnimation 3.5s infinite;
}
@keyframes moveAnimation {
0%,
100% {
transform: translate(-200%, 20%);
}
50% {
transform: translate(-200%, 25%);
}
}