Question

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

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

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

Answer 1

我找到了一个answer 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的样式组件

1 个答案: