Trigger animation on props with styled components

user_6393309 0
Viewed 2771

I am trying to run an animation on one of my components when one of the props is equal to true. However, I am getting an error that 'flash is not a function'.

https://codesandbox.io/s/wizardly-moser-tet99?file=/src/App.js:0-606

import React, { useState } from "react";
import styled, {keyframes} from "styled-components";

const flash = keyframes`
  from {
      opacity: 0;
      }

      to {
      opacity: 1;
      }
`;

const StyledTile = styled.div`
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: ${props => props.animate ? flash `0.3s linear 3` : `null`};
`

export default function App() {

  const [doAnimate, setDoAnimate] = useState(false);
  return (
    <div className="App">
      <StyledTile animate = {doAnimate}/>
      <button onClick = {() => setDoAnimate(true)}/>
    </div>
  );
}
styled-components reactjs
2 Answers

I used the css helper as the docs states here.

const StyledTile = styled.div`
  width: 100px;
  height: 100px;
  background-color: pink;
  animation: ${props =>
    props.animate &&
    css`
      ${flash} 0.3s linear 3
    `};
`;

And here's the sandbox

user_124617640

Seems like the syntax you're using is not supported by styled-components, check this link out:

Keyframes are lazily injected when they're used, which is how they can be code-splitted, so you have to use the css helper for shared style fragments

Here's a working example. So I had to wrap the animation in that css helper.

user_18122410
Related