Реагирующая группа переходов добавляет элементы при переходе, поэтому css перерывы сетки - PullRequest
Новая
       18

Реагирующая группа переходов добавляет элементы при переходе, поэтому css перерывы сетки

0 голосов
/ 13 февраля 2019

Реагирующая группа переходов генерирует элементы в DOM, которые разрушают мою сетку CSS, пока исчезают.Сетка имеет 6 ячеек и не может быть больше.

Код группы переходов 

const transitionsNames = {
    enter: classes["animation-enter"],
    enterActive: classes["animation-enter-active"],
    leave: classes["animation-leave"],
    leaveActive: classes["animation-leave-active"]
}

<ReactCSSTransitionGroup
    component={React.Fragment}
    transitionName={transitionsNames}
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}>
    {data.map(item => <Card code={item.code} element_type={"item"} key={Math.random()}/>)}
</ReactCSSTransitionGroup>

Анимация css: 

.animation-enter {
  opacity: 0;
  transform: scale(0);
}

.animation-enter.animation-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: all 500ms;
}

.animation-leave {
  transform: scale(1);
  opacity: 1;
}

.animation-leave.animation-leave-active {
  opacity: 0;
  transform: scale(0);
  transition: all 500ms;
}

Сетка css: 

  display: grid;
  grid-template-columns: repeat(6, 17rem);
  justify-content: center;
  grid-column-gap: 7rem;

Я думаю, что это возможно сделать с абсолютным позиционированием, но не могу понять, как.

Мне нужно, чтобы элементы менялись без разрушения сетки.Новые элементы должны генерироваться поверх старых элементов.

...