styled-components v4 syntax on animation css

Question

I recently upgraded my styled-components from v3 to v4. The below css ${jquery} animation line would work on v3 but cannot seem to get it working on v4.

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

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

I tried changing the syntax but can't seem to get it right.

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

${ifProp("isOpen", css`0.8s ${slideInRightAnimation}`, css`0.9s ${fadeOutLeftAnimation} forwards`)}... if you try this like this, what happens? I meant show definition of ifProp (seems to be a function) — delis
I am facing same issue with const animationStyles = { animation: css ${fadeIn} 0.5s , }; . Can you please me to resolve this? — Bonzo

Welsh Welsh · Accepted Answer · 2019-10-01T13:13:12

Ok, so this fixed the issue. Thanks Delis there was just an animation: missing from your statements.

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

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

styled-components v4 syntax on animation css

1 Answers