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

【问题标题】：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}` : '')} ;
`

但这也给了我错误。

【问题讨论】：

标签： css reactjs frontend styled-components

【解决方案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 =&gt; (props.animating === 'true' ? css`${fadeInSlide} 1s ease-in-out infinite forwards` : '')} ;

【讨论】：