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"
              >

StaggerChildren 不适用于 Framer Motion

StaggerChildren is not working with Framer Motion

reactjs

framer-motion