zoukankan      html  css  js  c++  java
  • react react-smooth动画

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

    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实例,到这里就完成了!

  • 相关阅读:
    nsq 启动流程讲解
    nsq 初识
    【资料】http包接口和结构体
    http包详解 2
    http包详解 1
    openstack多节点部署运维
    一款简单实用的串口通讯框架(SerialIo)
    ~MySQL Perfect~
    linux创建用户设置密码
    linux安装tomcat且配置环境变量
  • 原文地址:https://www.cnblogs.com/nimon-hugo/p/12787743.html
Copyright © 2011-2022 走看看