Запуск анимации на реквизите со стилизованными компонентами

Question

Я пытаюсь запустить анимацию на одном из моих компонентов, когда один из свойств равен 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>
  );
}

Answer 1

Похоже, что используемый вами синтаксис не поддерживается styled-components, проверьте эту ссылку out:

Ключевые кадры лениво вводятся, когда они используются, что Вот как они могут быть разделены на код, поэтому вам нужно использовать css помощник для фрагментов общего стиля

Вот рабочий пример . Поэтому мне пришлось обернуть анимацию в этот css помощник.

Answer 2

Я использовал помощник css, как указано в документации здесь .

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

А вот песочница