StaggerChildren未与Framer Motion一起使用

Question

当我的应用程序最初加载时，所有列表项都是动画效果，而不是令人震惊的效果。当我的待办事项从状态中删除时，我也使用AnimatePresence来制作退出动画。

对于Framer Motion，我使用以下变体

const listItemContainerVariant = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: { staggerChildren: 1 }
    }
  };
  const listItemVariant = {
    hidden: { x: -500 },
    show: { x: 0, transition: { type: "spring", stiffness: 120 } },
    exit: { scale: 1.1, x: 500, opacity: 0 },
    hover: { scale: 1.1 }
  };

我使用useState来管理我的待办事项：

const [todos, setTodos] = useState(
    localStorage.todos ? JSON.parse(localStorage.getItem("todos")) : []
);

下面是我的JSX代码

<motion.ul
          id="todo-list"
          variants={listItemContainerVariant}
          initial="hidden"
          animate="show"
        >
          <AnimatePresence>
            {todos.map((todo, index) => (
              <motion.li
                variants={listItemVariant}
                initial="hidden"
                animate="show"
                exit={"exit"}
                whileHover="hover"
                key={todo.id}
                className="list-item"
              >
                <span className="list-item-text">{todo.text}</span>
                <button onClick={() => handleEdit(todo)} className="edit-btn">
                  <span role="img" aria-label="emoji">
                    ✏️
                  </span>
                </button>
                <button
                  onClick={() => handleDelete(todo.id)}
                  className="delete-btn"
                >
                  <span role="img" aria-label="emoji">
                    ?
                  </span>
                </button>
              </motion.li>
            ))}
          </AnimatePresence>
        </motion.ul>

Answer 1

我发现要让staggerChildren正常工作，我必须从listItemVariant中删除退出和悬停属性，并将其单独添加到motion.li组件中。这个小修复让它工作起来了。

const listItemVariant = {
    hidden: { x: -500 },
    show: { x: 0, transition: { type: "spring", stiffness: 120 } }
};

  <motion.li variants={listItemVariant}
                exit={{ scale: 1.1, x: 500, opacity: 0 }}
                whileHover={{
                  scale: 1.1
                }}
                key={todo.id}
                className="list-item"
              >