如何在样式组件中触发 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 动画?的主要内容,如果未能解决你的问题,请参考以下文章

如何正确转义样式组件的 css 函数?

在挂载 Vue 组件时触发 CSS 动画

为啥 CSS 关键帧动画在具有范围样式的 Vue 组件中被破坏?

如何触发css3过渡动画

如何间隔更改样式组件的样式?

基于 React 实现一个 Transition 过渡动画组件