使用样式组件触发道具动画

Question

当其中一个道具等于 true 时，我试图在我的组件之一上运行动画。但是，我收到“flash 不是函数”的错误。

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

Answer 1

我使用了 css 助手，正如文档中所述。

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

这是沙盒