I am trying to drag a component whose css has transform animation. But it could not work. The component just move according to animation and could not be dragged. Is there any way to achieve the drag function?
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%);
}
}If you change css animation from transform to top, left, inline styles transform will be work and dragged. Try rewrite css like this example
.theComponent {
position: relative;
animation: moveAnimation 3.5s infinite;
}
@keyframes moveAnimation {
0%,
100% {
top: 5px;
}
50% {
top: 0px;
}
}