CODEWITHSUNDEEP
jqueryreactjsnext.jsstyled-components
Welsh
Welsh

Reputation: 39

styled-components v4 syntax on animation css

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\`)};
`

Upvotes: 0

Views: 2923

Answers (1)

Welsh
Welsh

Reputation: 39

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;
        `
    )}

Upvotes: 1

Related Questions