Ad

Styled-components V4 Syntax On Animation Css

- 1 answer

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

Answer

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;
        `
    )}
Ad
source: stackoverflow.com
Ad