在Styled-components中为transform属性添加过渡效果无效，该如何解决？

嘿，我找到你这个transform过渡失效的问题根源啦！

你代码里的问题出在transform属性值的单位不一致：当onStart为true时，你给translate传了无单位的0，而false时用的是带px单位的100px。CSS的过渡动画要求属性的前后状态值必须是同一类型且单位统一，不然浏览器没法计算平滑的过渡过程，就直接跳变了，看起来就像没过渡效果一样。

只要把无单位的0改成0px，让两个状态的translate值单位统一，过渡就能正常生效啦：

const Red = styled.div`
  width: 100%;
  height: 100%;
  background-color: red;
  flex: 0 0 100%;
  transition: transform 500ms ease;
  // 统一单位为px
  transform: translate(${ props => props.onStart ? '0px' : '100px' });
`;

另外我帮你检查了其他代码部分，Wrapper的overflow:hidden和元素布局都没问题，修改单位后就能看到平滑的移动过渡效果了～

内容的提问来源于stack exchange，提问作者ueeieiie