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

【问题标题】：What approach do you follow when using animations with styled-components使用带有样式组件的动画时，您遵循什么方法
【发布时间】：2019-03-26 19:19:21
【问题描述】：

我正在尝试使用 react 和 styled-components 创建一个手风琴。

我正在尝试将 display: none 更改为 display:block 并添加一个过渡，但它没有过渡，它只有在我删除 styled-component 上的 display 属性时才能正常工作，但如果我可以看到部分 div删除该属性。对不起我的英语，谢谢

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

【问题讨论】：

标签： reactjs animation styled-components

【解决方案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 元素应用默认边距。在这种情况下，段落应用了默认边距。使用边距时会忽略背景颜色。

下面的链接应该是你想要的。

https://codesandbox.io/s/nkj7mx73jj

【讨论】：

没关系，但我看不到过渡，就像根本没有过渡一样，不知道我是否必须玩间隔或类似的东西。
您能否进一步解释/描述应该执行什么动画？
我在 AccordionItemPanel 上有一个过渡，但它没有做动画，它只是出现和消失。
我们说的是changeAcordionState的方法吗？正如我从发布的链接中看到的那样，我期望手风琴标签的行为方式。你能描述一下动画应该做什么吗？
是的，我试图复制这个w3schools.com/howto/howto_js_accordion.asp