[英]React pose - animate in from right, exit on left
I am currently playing around with React pose. 我目前正在玩React姿势。 What I'm trying to do is animate different boxes in from the right, and exit them on the left. 我想做的是从右侧为不同的框设置动画,并在左侧退出它们。 However, I can't seem to get the preEnterPose
to work the way I want it. 但是,我似乎无法让preEnterPose
以我想要的方式工作。 It always seems to default to the exit pose. 似乎总是默认使用退出姿势。
How can I get the boxes to animate in from the right, and exit on the left? 如何使框从右侧进行动画处理,然后从左侧退出? Here is what I am working with https://codesandbox.io/s/react-pose-enterexit-o2qqi?fontsize=14&hidenavigation=1&theme=dark 这是我正在使用的https://codesandbox.io/s/react-pose-enterexit-o2qqi?fontsize=14&hidenavigation=1&theme=dark
import React from "react";
import ReactDOM from "react-dom";
import posed, { PoseGroup } from "react-pose";
import "./styles.css";
const Card = posed.div({
enter: {
x: 0,
opacity: 1,
preEnterPose: {
x: 50
},
delay: 300,
transition: {
x: { type: "spring", stiffness: 1000, damping: 15 },
default: { duration: 300 }
}
},
exit: {
x: -50,
opacity: 0,
transition: { duration: 150 }
}
});
class Example extends React.Component {
state = { isVisible: false, index: 0, items: ["1", "2", "3", "4", "5"] };
componentDidMount() {}
next = () => {
if (this.state.index === this.state.items.length - 1) {
this.setState({
index: 0
});
} else {
this.setState({
index: this.state.index + 1
});
}
};
render() {
const { index, items } = this.state;
return (
<div>
<PoseGroup>
{items.map((id, idx) => {
if (idx === index) {
return (
<Card className="card" key={idx}>
{id}
</Card>
);
}
return null;
})}
</PoseGroup>
<button onClick={this.next}>next</button>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);
First you update your posed.div
as the following. 首先,您将更新如下的posed.div
。
const Card = posed.div({
preEnterPose: {
x: 50,
opacity: 0,
transition: { duration: 150 }
},
enter: {
x: 0,
opacity: 1,
delay: 300,
transition: {
x: { type: "spring", stiffness: 1000, damping: 15 },
default: { duration: 300 }
}
},
exit: {
x: -50,
opacity: 0,
transition: { duration: 150 }
}
});
Then you set your <PoseGroup>
's preEnterPose
props to your key of the pose preEnterPose
. 然后,将<PoseGroup>
的preEnterPose
道具设置为姿势preEnterPose
键。 And it should work. 它应该工作。 preEnterPose
's default props is set to exit
. preEnterPose
的默认道具设置为exit
。 Read it here 在这里阅读
<PoseGroup preEnterPose="preEnterPose">
{items.map((id, idx) => {
if (idx === index) {
return (
<Card className="card" key={idx}>
{id}
</Card>
);
}
return null;
})}
</PoseGroup>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.