Ad
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\`)};
`
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
Related Questions
- → OctoberCMS - How to make collapsible list default to active only on non-mobile
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → when i send data with ajax(jquery) i don't find the values in controller without form in laravel 5.1
- → DropzoneJS & Laravel - Output form validation errors
- → Knockout JS - How to return empty strings for observable fields
- → How to replace *( in a string
- → Get the calling element with vue.js
- → Sent Variable to Controller via Ajax in Blade
- → AJAX folder path issue
- → Onclick with argument causes javascript syntax error
- → KNockout JS - Automatic reload of ajax call
Ad