reactjs - 带有 animate.css 的样式化组件

Question

我在我的项目中使用样式组件。现在我想实现一些简单的动画，比如animate.css

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

再次实现像animate.css这样的动画是浪费时间。此外，我不想将其他软件包安装为Aphrodite，因为我已经有了样式组件。

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