无法使用带样式组件的关键帧样式嵌套动画。
无法使用带样式组件的关键帧样式嵌套动画。
提问于 2019-06-26 21:34:30
我正在创建一个图像动画与一个定制的动画在样式-组件与条件样式。但这让我错误地说
“未明错误:您似乎正在将关键帧声明(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}` : '')} ;
`但这也给了我错误。
回答 2
Stack Overflow用户
发布于 2019-07-07 15:17:42
对我起作用的是添加css属性。也许这会有帮助：
animation: ${props => (props.animating === 'true' ? css`${fadeInSlide} 1s ease-in-out infinite forwards` : '')} ;
Stack Overflow用户
发布于 2019-09-20 20:54:05
添加到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;` : '')} ;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56781193
复制相关文章
相似问题
腾讯云开发者
