如何解决styled-components组件的CSS过渡效果不生效问题？

问题原因及解决方法 #

1. 父组件条件渲染Menu组件导致
   如果你的父组件里是类似{menuOpen && <Menu menuOpen={menuOpen} />}的写法，菜单关闭时组件会直接被卸载，自然不会触发过渡效果，打开时组件直接挂载完成，就会出现闪现的情况。
   解决方法：删除父组件中对Menu组件的条件渲染判断，始终挂载组件，仅通过menuOpen属性控制显隐状态即可。

2. transition属性被其他样式覆盖
   全局样式、CSS重置规则或其他高优先级样式可能覆盖了Container的transition配置，可打开浏览器开发者工具，查看Container元素的样式列表，确认transition属性是否生效、是否被划掉。
   解决方法：可以先加!important测试是否为优先级问题，修改styled component代码如下：

const Container = styled.div`
  width: 300px;
  height: 100vh;
  background-color: ${e => e.theme.colors.main};
  position: fixed;
  top: 0;
  right: ${props => (props.menuOpen ? '0' : '-300px')};
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 2s ease !important;
`;

3. 可选优化方案：使用transform实现过渡
   修改right属性会触发页面重排，性能不如走GPU加速的transform属性，可将代码调整为以下写法，过渡效果更流畅：

const Container = styled.div`
  width: 300px;
  height: 100vh;
  background-color: ${e => e.theme.colors.main};
  position: fixed;
  top: 0;
  right: 0;
  transform: ${props => (props.menuOpen ? 'translateX(0)' : 'translateX(100%)')};
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 2s ease;
`;

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