Open wiryonolau opened 2 years ago
I come up with this, is this correct ?
import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import { Animate } from "https://cdn.skypack.dev/react-move@6.5.0";
const Box = function (props) {
let [style, setStyle] = React.useState({});
let [newX, setNewX] = React.useState(0);
React.useEffect(() => {
console.log(props.s.x);
setNewX((prev) => {
if (props.direction == "forward") {
return prev + (props.s.x - prev);
} else {
return props.s.x;
}
});
setStyle({
position: "absolute",
width: 50,
height: 50,
borderRadius: 4,
opacity: 0.7,
backgroundColor: "#ff69b4",
WebkitTransform: `translate3d(${newX}px, 0, 0)`,
transform: `translate3d(${newX}px, 0, 0)`
})
}, [props.s.x, props.direction]);
return (
<div
style={style}
/>
);
};
const Component = function (props) {
let [newX, setNewX] = React.useState(0);
let [direction, setDirection] = React.useState("forward");
let reverseClick = () => {
setDirection("reverse");
setNewX((prev) => { return (prev - 200); });
}
let forwardClick = () => {
setDirection("forward");
setNewX((prev) => { return (prev + 200); });
};
return (
<div>
<button onClick={reverseClick}>Reverse</button>
<button onClick={forwardClick}>Foward</button>
<Animate
start={() => ({
x: 0,
})}
update={() => ({
x: [newX],
timing: { duration: 750 }
})}
>
{(s) => {
return <Box s={s} direction={direction} />;
}}
</Animate>
</div>
);
};
ReactDOM.render(<Component />, document.getElementById("root"));
Hi from your example in https://react-move-docs.netlify.app/demos/simple
The first animate in that page, it's toggle the x value to either 200 or 0 when click. How do I make it run another 200 instead of revert to 0 but base on click ? If the inital position.left is 0 it become 200 on first click and 400 on second click and so on.