animate.css 样式组件

Question

我用styled-components in my project. Now I would like to implement some simple animations like animate.css

可以使用 react-animations (or similar library) with styled-components 吗？

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

Answer 1

我找到了 answer with code:

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

animate.css 样式组件

Styled-components with animate.css

css-animations

animate.css

reactjs

styled-components