Question

我将样式组件与React一起使用，我有这样的组件：

import styled, { keyframes } from 'styled-components'
import { ReactComponent as SpinnerIcon } from './spinner.svg'

const rotate = keyframes`
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
`

const Spinner = styled(SpinnerIcon)`
    margin-top: 50px;
    animation: ${rotate} 2s ease-in infinite;
`

export default Spinner

当我像这样使用此组件时：

<Spinner width='50px' height='50px' />

我看到了这个组件，但是它没有动画。怎么了？

Answer 1

尝试一下：

  const Spinner = styled.img.attrs({
      src: SpinnerIcon,
    })`
        margin-top: 50px;
        animation: ${rotate} 2s ease-in infinite;

如果这对您不起作用，请也共享您的svg文件。另外，您可能需要使用 linear 函数而不是 ease-in `

样式化组件，SVG不动画

1 个答案: