在配方中的步骤列表中，所有步骤divs都position: absolute在容器中的处显示overflow: hidden。
如果下一步骤是下一步骤，则它会隐藏在屏幕的右侧，移至当前步骤的中心（可见），然后移至左侧。（跟踪为currentness）。
export const CookingStep = ({ step, currentness }: Props) => {
const StepWrapper = styled.div({
width: '100%',
background: 'lightgrey',
height: '100px',
position: 'absolute',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
transition: '1s ease',
left: currentness! * 100 + '%' // left = -1, center = 0, right = 1
})
return <StepWrapper children={ step.text }/>
}
/* REDUX CONTAINER */
const selectProps = (state: RootState, ownProps: Props) =>
({ currentness: getCurrentness(ownProps.step)(state) })
const CookingStepContainer = connect(selectProps)(CookingStep)
export default CookingStepContainer
除了未设置动画（从transition媒体资源进行动画设置）之外，其他所有内容均正常运行。
我非常确定我在CookingStep更改步骤时不会重新渲染的父级（这将导致步骤被删除，不重新渲染或类似的操作，并阻止了动画）。我尝试了一个log语句，StepsCarousel以查看何时渲染，并且仅渲染一次（在启动时）。
// Wrappers are just styled components
const StepsCarousel = ({ steps, incStep, decStep }: Props) =>
<CarouselWrapper>
<Arrow onClick={ incStep }>{ "<" }</Arrow>
<StepsWrapper>{
steps.map((step, i) =>
<CookingStepContainer step={ step } key={ i }/>
)
}</StepsWrapper>
<Arrow onClick={ decStep }>{ ">" }</Arrow>
</CarouselWrapper>
我已经在https://codesandbox.io/s/angry-grass-hjkw9上模拟了整个html / css布局和动画行为，这让我花了很多时间来完成令人费解的脑力劳动，但动画效果却十分完美。我看不到我在这里所做的和在这里所做的之间的区别。
（在codesandbox上，我使用了类名，而不是直接left使用样式化的组件设置属性。但是我实际上已经尝试在应用程序中使用类名，但无济于事）。
为什么动画不起作用？
将StyledWrapper组件移出CookingStep组件，并currentness作为prop传递给StyledWrapper：
const StepWrapper = styled.div({
width: '100%',
background: 'lightgrey',
height: '100px',
position: 'absolute',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
transition: '1s ease',
left: ${props => props.currentness! * 100 + '%'}
})
export const CookingStep = ({ step, currentness }: Props) => {
return <StepWrapper currentness={currentness} children={ step.text }/>
}
希望能帮助到你 ：）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句