staggerChildren with framer 运动
staggerChildren with framer motion
我在让成帧器动作 "staggerChildren" 过渡到处理简单的项目列表时遇到了一些问题。它基本上允许子组件的动画交错。
我为父容器和子容器设置了这样的动画属性:
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: {
staggerChildren: 0.5
}
}
};
const listItem = {
hidden: { opacity: 0 },
show: { opacity: 1 }
};
然后我获取一组项目并将其保存到我的用户状态。最后只是一个简单的映射来渲染该数组中的一些数据。
export const Example = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
axios.get("https://reqres.in/api/users").then(res => {
setUsers(res.data.data);
});
}, []);
return (
<motion.ul variants={container} initial="hidden" animate="show">
{users.map((item, i) => (
<motion.li key={i} variants={listItem}>
{item.first_name}
</motion.li>
))}
</motion.ul>
);
};
问题是这些项目在渲染时不会交错并最终同时淡入。我不确定为什么。例如:https://codesandbox.io/s/wispy-shape-9bfbr?file=/src/Example.js
如果我改为使用存储在变量中的静态项目数组,然后只使用完全相同的循环,我就可以使转换工作。就像这个工作示例:https://codesandbox.io/s/late-http-vz1s6?file=/src/Example.js
但是我需要这个来处理我在 useEffect Hook 中获取的数组。任何人都知道如何?
K,通过去掉useState中的空数组解决..
我知道这个问题已经得到解答,但仍会为稍后可能阅读的人解答。所以,这就是你需要做的。
这是因为您不想错开直到您拥有内容,否则错开会 运行 在内容到达之前,您不会看到它发生。
<React.Fragment>
{users &&
<motion.ul variants={container} initial="hidden" animate="show">
{users.map((item, i) => (
<motion.li key={i} variants={listItem}>
{item.first_name}
</motion.li>
))}
</motion.ul>
}
</React.Fragment>
我在让成帧器动作 "staggerChildren" 过渡到处理简单的项目列表时遇到了一些问题。它基本上允许子组件的动画交错。
我为父容器和子容器设置了这样的动画属性:
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: {
staggerChildren: 0.5
}
}
};
const listItem = {
hidden: { opacity: 0 },
show: { opacity: 1 }
};
然后我获取一组项目并将其保存到我的用户状态。最后只是一个简单的映射来渲染该数组中的一些数据。
export const Example = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
axios.get("https://reqres.in/api/users").then(res => {
setUsers(res.data.data);
});
}, []);
return (
<motion.ul variants={container} initial="hidden" animate="show">
{users.map((item, i) => (
<motion.li key={i} variants={listItem}>
{item.first_name}
</motion.li>
))}
</motion.ul>
);
};
问题是这些项目在渲染时不会交错并最终同时淡入。我不确定为什么。例如:https://codesandbox.io/s/wispy-shape-9bfbr?file=/src/Example.js
如果我改为使用存储在变量中的静态项目数组,然后只使用完全相同的循环,我就可以使转换工作。就像这个工作示例:https://codesandbox.io/s/late-http-vz1s6?file=/src/Example.js
但是我需要这个来处理我在 useEffect Hook 中获取的数组。任何人都知道如何?
K,通过去掉useState中的空数组解决..
我知道这个问题已经得到解答,但仍会为稍后可能阅读的人解答。所以,这就是你需要做的。
这是因为您不想错开直到您拥有内容,否则错开会 运行 在内容到达之前,您不会看到它发生。
<React.Fragment>
{users &&
<motion.ul variants={container} initial="hidden" animate="show">
{users.map((item, i) => (
<motion.li key={i} variants={listItem}>
{item.first_name}
</motion.li>
))}
</motion.ul>
}
</React.Fragment>