无法使用带有样式组件的关键帧设置嵌套动画的样式

Posted 2023-02-22

【中文标题】无法使用带有样式组件的关键帧设置嵌套动画的样式

【英文标题】：Not able to style nested animations with keyframes with styled-components

【发布时间】：2019-11-08 21:28:12

【问题描述】：

我正在使用带有条件样式的样式组件中的自定义动画为图像创建动画。但它给了我一个错误说

“未捕获的错误：您似乎正在插入关键帧声明 (bZfjDs) 转换为未标记的字符串。这得到了支持 styled-components v3，但在 v4 中不再支持作为关键帧 现在按需注入。请将您的字符串包装在 css 中 助手（参见https://www.styled-components.com/docs/api#css），其中 确保样式被正确注入。”

我是用 v4 语法做的，但它仍然不起作用。有办法吗？

我试过按照语法，但还是不行。

首先我做到了：

animation: $props => (props.animating === 'true' ? `$fadeInSlide 1s ease-in-out infinite forwards` : '') ;

fadeInSlide 是我自己的关键帧，然后我尝试这样做：

const fadeInAnimation = css`
    animation: $fadeInSlide 1s ease-in-out infinite forwards;
  `
const BlockImage = styled(Image)`
  animation: $props => (props.animated === 'true' ? `$fadeInAnimation` : '') ;
`

但这也给了我错误。

【参考方案1】：

添加到 Gav 的答案 - 您的三元运算符可能不正确。在 javascript 中，true 不等于 'true'。您可能还需要添加分号。

试试

animation: $props => (props.animating === true ? css`$fadeInSlide 1s ease-in-out infinite forwards;` : '') ;

或者

animation: $props => (props.animating ? css`$fadeInSlide 1s ease-in-out infinite forwards;` : '') ;

【参考方案2】：

对我有用的是添加 css 属性。也许这会有所帮助：

animation: $props => (props.animating === 'true' ? css`$fadeInSlide 1s ease-in-out infinite forwards` : '') ;