如何在样式组件中触发 CSS 动画?
Posted
技术标签:
【中文标题】如何在样式组件中触发 CSS 动画?【英文标题】:How to trigger css animation in styled-components? 【发布时间】:2019-04-11 13:55:56 【问题描述】:通常,我们通过删除和添加具有 CSS 动画属性的类来解决此问题problem。如何使用 styled-components 库删除动画属性并快速重新添加以触发动画?
【问题讨论】:
【参考方案1】:你可以使用 props 来改变样式,例如:
const MyComp = styled.div`
transition: width 2s;
width: $props => props.animate ? "20px" : "10px";
`
然后你可以在使用组件触发动画的时候传递一个prop:
<MyComp animate=booleanFlag />
在这种情况下,您可以根据需要在 true 和 false 之间切换 animate 属性。也许使用父组件的状态。
【讨论】:
以上是关于如何在样式组件中触发 CSS 动画?的主要内容,如果未能解决你的问题,请参考以下文章