0

我正在使用Framer 动作，并希望从 API 中获取的卡片一张一张地淡入淡出。我正在关注Framer motion的这段代码演示。

这完全可以正常工作：

<motion.ul className='container' variants={container} initial='hidden' animate='visible'>
    {[0, 1, 2].map((recipe) => (
        <motion.li key={recipe.idMeal} variants={item}>
            <RecipeCard />
        </motion.li>
    ))}
</motion.ul>

而这个（刚刚更改[0,1,3]为recipes）只是将所有卡片视为一个对象，并且它们都同时动画：

<motion.ul className='container' variants={container} initial='hidden' animate='visible'>
    {recipes.map((recipe) => (
        <motion.li key={recipe.idMeal} variants={item}>
            <RecipeCard />
        </motion.li>
    ))}
</motion.ul>

这是recipes外观：

食谱

我该如何解决它，以便卡片一张一张地交错并设置动画，而不是作为一个对象？

编辑 - 完整代码：

import React, { useEffect, useState } from "react";
import RecipeCard from "./RecipeCard";
import "./App.css";
import { motion } from "framer-motion";

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.1,
        },
    },
};

const item = {
    hidden: { y: 20, opacity: 0 },
    visible: {
        y: 0,
        opacity: 1,
    },
};

return (
    <div className='App'>
        {/* <form>
            <input type='text' />
            <button type='submit'>Search</button>
        </form> */}
        <motion.ul className='container' variants={container} initial='hidden' animate='visible'>
            {recipes.map((recipe) => (
                <motion.li key={recipe.idMeal} variants={item}>
                    <RecipeCard />
                </motion.li>
            ))}
        </motion.ul>
    </div>
);
}

export default App;
4

0 回答 0