У меня возникли проблемы с переходом "staggerChildren" движений фреймера для работы с простым списком элементов. Это в основном позволяет смещать анимацию дочерних компонентов.
Я настроил свои свойства анимации для родительского контейнера и дочерних компонентов следующим образом:
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: {
staggerChildren: 0.5
}
}
};
const listItem = {
hidden: { opacity: 0 },
show: { opacity: 1 }
};
Затем я беру массив items и сохраните его в моем состоянии пользователей. И, наконец, простая карта для рендеринга некоторых данных из этого массива.
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
Я могу заставить переход работать, если вместо этого я использую массив stati c элементов, хранящихся в переменной, а затем просто используйте точно такой же l oop. Как этот рабочий пример: https://codesandbox.io/s/late-http-vz1s6?file= / src / Example. js
Но мне это нужно, чтобы работать с массивом, который я получаю в useEffect Hook. Кто-нибудь знает как?