Движение: аватарские переходы в Flex Row всегда анимируют «сзади» братьев и сестер, несмотря на высокий Z-индекс ⇐ CSS

[Anonymous]

Я строю анимированную группу аватаров в next.js, используя движение (ранее Framer Motion) с макетом Flexbox.
Я хочу, чтобы аватары плавно перемещались между двумя группами («онлайн» и «в автономном режиме»), когда переключались, и для перехода Avatar всегда анимировать выше, а не за ними. Оффлайн в онлайн (или наоборот), он правильно вскакивает в свою новую группу. Ничто не работает:
Аватар все еще анимирует под более ранними братьями и сестрами в гибкой ряду. < /p>
Как я могу гарантировать, что переходный аватар всегда анимирует над другими в горизонтальной схеме сгибания? /> Обратите внимание, как аватар скользит позади других, а не над ними.

{user.fallback}


))}


)}

{offline.length > 0 && (

u.id).join("_") + "-offline"}
className="flex h-12"
>
{offline.map((user) => (
toggleStatus(user.id)}
animate={{
filter: "grayscale(1)",
scale: 1,
}}
transition={AVATAR_MOTION_TRANSITION}
title="Click to go online"
initial={false}
>


{user.fallback}


))}


)}


);
}

< /code>
Любая помощь или предложения оценены.
Я проверил подобные вопросы, но ничто не решает эту конкретную проблему.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... blings-des