动画上的样式化组件 v4 语法 css

Question

我最近将我的样式组件从 v3 升级到了 v4。下面的 css ${jquery} 动画行可以在 v3 上运行，但似乎无法在 v4 上运行。

const StyledGlide = styled(Glide)`
    animation: ${ifProp("isOpen", `0.8s ${slideInRightAnimation}`, `0.9s ${fadeOutLeftAnimation} forwards`)};
`

我收到这个错误：您似乎正在将关键帧声明 (ifGrPa) 插入到未标记的字符串中。这在 styled-components v3 中受支持，但在 v4 中不再受支持，因为关键帧现在是按需注入的。请将您的字符串包装在 css`` 助手中，以确保正确注入样式。参见 https://www.styled-components.com/docs/api#css

我尝试更改语法，但似乎无法正确处理。

const StyledGlide = styled(Glide)`
    animation: ${ifProp("isOpen", css\`0.8s ${slideInRightAnimation}`, `0.9s ${fadeOutLeftAnimation} forwards\`)};
`

Answer 1

好的，这解决了问题。谢谢 Delis，只有一个动画：您的陈述中缺少。

import styled, { css } from "styled-components"

const StyledGlide = styled(Glide)`
    ${ifProp(
        "isOpen",
        css`
            animation: 0.8s ${slideInRightAnimation};
        `,
        css`
            animation: 0.9s ${fadeOutLeftAnimation} forwards;
        `
    )}

动画上的样式化组件 v4 语法 css

styled-components v4 syntax on animation css

jquery

reactjs

styled-components

next.js