使用带样式组件的动画时，您遵循什么方法

Question

我正在尝试使用 React 和样式组件创建手风琴。

我正在尝试更改显示：none 到 display:block 并添加一个过渡，但它没有过渡，只有当我删除样式上的显示属性时它才能正常工作-component 但我可以看到 div 的一部分，如果我删除 property.Sorry 作为我的英语，谢谢

https://codesandbox.io/s/z2nj50z46p?fontsize=14

Answer 1

我认为您的问题出在 css

的这一部分

const AcordionItemWrapper = styled.div`
  width: 100%;  // This is now 100% and not 80%
  height: auto;
  overflow: hidden;
  background-color: blue;
`;

这种变化产生了这种结果。

这确保您的 darkgoldenrod 选项卡是其容器宽度的 100%。当它处于活动状态时，下拉菜单也是 100%。

经过进一步调查，我发现了您的问题。一些标记问题，加上浏览器在某些 html 元素上应用默认边距。在这种情况下，段落应用了默认边距。使用边距时背景颜色被忽略。

下面的link应该是你想要的。

https://codesandbox.io/s/nkj7mx73jj

使用带样式组件的动画时，您遵循什么方法

What approach do you follow when using animations with styled-components

animation

reactjs

styled-components