У меня есть проект, в котором я использую Vue Transitions для анимации сортировки и фильтрации сетки, содержащей автомобильные компоненты. Каждый элемент сетки содержит одну машину-компонент.
Проблема в том, что пользователь может приглашать новых пользователей на платформу. Эти новые пользователи / автомобили не являются теми же объектами, что и существующие объекты, каждый из которых показан в компоненте автомобиля. В этих новых объектах я показываю разные типы данных / информации.
Вот почему я решил показать этим «новым» пользователям, использующим компоненты другого типа, чем автомобильные компоненты.
Проблема в том, что оба компонента должны отображаться внутри одной и той же сетки CSS. Но когда я пытаюсь добавить оба компонента в группу перехода, эта группа перехода прерывается и больше не выполняет анимацию сортировки.
<transition-group class="grid">
<InvitedUsers v-for="invite in Invited" />
<Users v-for"user in Users" />
</transition-group>
Это можно обойти? Могу ли я добавить набор элементов бота в одну и ту же сетку CSS, и при этом группа перехода будет выполнять свою работу? Я пробовал следующее, но это не сработало, потому что оба набора элементов созданы в разных сетках. Но таким образом группа перехода снова работает.
<div class="grid">
<InvitedUsers v-for="invite in Invited" />
</div>
<transition-group class="grid">
<Users v-for"user in Users" />
</transition-group>
Однажды я боролся с той же проблемой. Мы не можем напрямую обернуть компоненты внутри ‹transition-group›, должна быть другая оболочка вокруг компонента.
Вот пример
Возможно, вам придется немного отрегулировать контейнер сетки.