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

Question

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

"Uncaught Error: It seems you are interpolating a keyframe declaration (bZfjDs) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css`` helper (see https://www.styled-components.com/docs/api#css), which ensures the styles are injected correctly."

我用 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` : '')} ;