react react-smooth动画

Posted 2021-02-21 nimon-hugo

首先自然而然的安装一下依赖：

npm install react-smooth --save-dev

接下来就是组件代码啦：

import React, { Component, Fragment } from ‘react‘;
import Animate from ‘react-smooth‘;

class ReactSmooth extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  render() {
    const steps = [{
      style: {
        opacity: 0
      },
      duration: 400//该对象中的执行样式持续400s
    }, {
      style: {
        opacity: 1,
        transform: ‘translate(0,0)‘
      },
      duration: 1000//该对象中的执行样式持续1s
    }, {
      style: {
        transform: ‘translate(100px,100px)‘,
      },
      duration: 1200//该对象中的执行样式持续1.2s
    }];
    return (
      <React.Fragment>
        <Animate steps={steps}>
          <div>
            动画插件 动画插件 动画插件 动画插件 动画插件 动画插件 动画插件 动画插件 动画插件 动画插件 动画插件 动画插件 动画插件 动画插件 动画插件 动画插件
          </div>
        </Animate>
        {/* 子组件可以是一个函数 */}
        <Animate from={{ opacity: 0 }}
          to={{ opacity: 1 }}
          easing="ease-in"
        >
          {
            ({ opacity }) => <div style={{ opacity }}>子组件子组件子组件子组件子组件子组件子组件子组件子组件子组件子组件子组件子组件子组件</div>
          }
        </Animate>
      </React.Fragment>
    )
  }
}

export default ReactSmooth;

一个react-smooth实例，到这里就完成了！