带有 animate.css 的样式组件

Question

我在我的项目中使用styled-components。现在我想实现一些简单的动画，例如 animate.css

是否可以将 react-animations （或类似的库）与 styled-components 一起使用？

再次实现类似animate.css中的动画是浪费时间。另外，我不想将另一个包安装为Aphrodite，因为我已经有了styled-components。

Answer 1

我找到了一个答案，其中包含代码：

import React from 'react';
import styled, { keyframes } from 'styled-components';
import { fadeIn } from 'react-animations';

const fader = keyframes`${fadeIn}`;

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
  animation: 1s ${fader} alternate infinite;
`;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;


export default () => {
  // Render these styled components like normal react components. They will pass on all props and work
  // like normal react components – except they're styled!
  return (
    <Wrapper>
      <Title>Hello World, this is my first styled component!</Title>
    </Wrapper>
  );
}

Answer 2

对于那些面临类似挑战的人，请查看这个库：

样式组件-animatecss。