我正在使用成帧器运动,并且我正在尝试实现交错,以便每个下一个孩子都有一些不错的延迟。有一行关键代码,当我替换时[0, 1, 2, 3].map
with recipes.map
突然间,所有的孩子都被视为一大块,他们不再摇摇欲坠。
看看这个demo你一定会明白我的意思。这段代码有什么问题?我快失去理智了:)
function App() {
const request = `https://www.themealdb.com/api/json/v1/1/search.php?s=chicken`;
const [recipes, setRecipes] = useState([]);
useEffect(() => {
getRecipes();
}, []);
const getRecipes = async () => {
const response = await fetch(request);
const data = await response.json();
setRecipes(data.meals);
console.log(data.meals);
};
const container = {
hidden: { opacity: 1, scale: 0 },
visible: {
opacity: 1,
scale: 1,
transition: {
when: "beforeChildren",
staggerChildren: 0.5
}
}
};
const item = {
hidden: { x: 100, opacity: 0 },
visible: {
x: 0,
opacity: 1
}
};
return (
<div className="App">
<motion.ul variants={container} initial="hidden" animate="visible">
{[0, 1, 2, 3].map(recipe => (
<motion.li key={recipe.idMeal} variants={item}>
<RecipeCard title={recipe.strMeal} />
</motion.li>
))}
</motion.ul>
<motion.ul variants={container} initial="hidden" animate="visible">
{recipes.map(recipe => (
<motion.li key={recipe.idMeal} variants={item}>
<RecipeCard title={recipe.strMeal} />
</motion.li>
))}
</motion.ul>
</div>
);
}
这有点棘手,但只有当项目可用时才需要设置动画:
animate={recipes.length > 0 && "visible"}
这是因为在第一次渲染时,您实际上为空数组设置了动画。
animate="visible"
然后,当您更新recipes
异步调用后,您不会再次触发动画。
const container = {
hidden: { opacity: 1, scale: 0 },
visible: {
opacity: 1,
scale: 1,
transition: {
staggerChildren: 0.5
}
}
};
const item = {
hidden: { x: 100, opacity: 0 },
visible: {
x: 0,
opacity: 1
}
};
const request = `https://www.themealdb.com/api/json/v1/1/search.php?s=chicken`;
function App() {
const [recipes, setRecipes] = useState([]);
useEffect(() => {
const getRecipes = async () => {
const response = await fetch(request);
const data = await response.json();
setRecipes(data.meals);
console.log(data.meals);
};
getRecipes();
}, []);
return (
<div className="App">
<motion.ul
variants={container}
initial="hidden"
animate={recipes.length > 0 && "visible"}
>
{recipes.map(recipe => (
<motion.li key={recipe.idMeal} variants={item}>
<RecipeCard title={recipe.strMeal} />
</motion.li>
))}
</motion.ul>
</div>
);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)