У меня есть проект, в котором я использую 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>
Источник: