У меня есть элемент, который отображает последовательность шагов, и есть элементы управления для go для предыдущего / следующего шага (путем установки currentStepIndex в Redux). В настоящее время я отрисовываю все шаги (не только видимые) в контейнере с гибкими столбцами с помощью justify-content: space -ween, overflow: hidden. Значение pos равно -1, если шаг пройден (и находится над контейнером), 0, если он должен отображаться в данный момент, и 1, если это предстоящий шаг (ниже контейнера). Свойство перехода css анимирует движение.
export const StepWrapper = styled.div<{ pos: Currentness, isCurrent: boolean }>({
width: '100%',
height: '100px',
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
transition: 'font-size 0.75s ease',
}, ({ pos, isCurrent }) => ({
fontWeight: isCurrent ? 'bold' : 'normal',
fontSize: isCurrent ? 'x-large' : 'medium',
top: pos * 100 + '%',
position: pos === Currentness.Current ? 'relative' : 'absolute'
}))
Это прекрасно работает, когда я показываю один шаг за раз, потому что один шаг поднимается вверх, а другой поднимается снизу, и это похоже, что список прокручивается.
Но я хочу показать 3 шага за раз, с текущим шагом в середине. Я на самом деле полностью его установил, кроме анимации. Поскольку код в настоящее время, при переходе к следующему шагу, первый шаг появляется, чтобы перейти к середине контейнера и затем взлететь вверх, после чего следующий шаг плавает, медленнее, в его новом правильном месте.
Я не хочу использовать контейнер с полосой прокрутки. Я хочу, чтобы весь список отображался как перемещающийся вместе, и видимые шаги всегда должны были отображаться с помощью flexbox (поэтому даже если бы я выполнял какое-то поведение «scrollTo» для некоторой y-координаты, я не думаю, что это сработает ). По той же причине, я не думаю, что манипулирование верхним свойством каждого элемента списка является решением (которое потребовало бы, чтобы они все были позиционными: абсолютными также).