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

Question

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

“未捕获的错误：您似乎将关键帧声明 (bZfjDs) 插入到未标记的字符串中。这在样式组件 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}` : '')} ;
`

但这也给了我错误。

Answer 1

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

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