Estoy tratando de arrastrar un componente cuyo css tiene animación de transformación. Pero no pudo funcionar. El componente simplemente se mueve de acuerdo con la animación y no se puede arrastrar. ¿Hay alguna manera de lograr la función de arrastre?
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%); } }Si cambia la animación css de transform a top, left , la transform de estilos en línea funcionará y se arrastrará. Intenta reescribir css como este ejemplo
.theComponent { position: relative; animation: moveAnimation 3.5s infinite; } @keyframes moveAnimation { 0%, 100% { top: 5px; } 50% { top: 0px; } }