Я пытаюсь запустить анимацию на одном из моих компонентов, когда один из свойств равен true. Однако я получаю сообщение об ошибке «fla sh не является функцией».
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>
);
}