zoukankan      html  css  js  c++  java
  • react 过渡动画组件

    在项目中可能会有一些动画效果展示或是页面切换效果,css动画的方式,比较局限,涉及到一些js动画的时候没法处理了。react-transition-groupreact的第三方模块,借住这个模块可以更方便的实现更加复杂的动画效果

    • 安装

    npm i -S react-transition-group

    • 使用

    state = {

        show: true

    }

     

    //执行动画

      handleToggole = () => {

        this.setState({

          show: !this.state.show,

     

        })

    }

     

    render(){

    return (

    <CSSTransition

              in={this.state.show}   //控制动画是否入场,为true时,动画进场,为false时动画出场

              timeout={1000}         //动画执行时间

              classNames={{

                enter: 'animated',

                enterActive: 'slideInLeft',

                exit: 'animated',

                exitActive: 'slideOutLeft'

              }}      //自定义的类名(定义动画效果,进场前,进场后直到结束,结束前,结束后)

                 unmountOnExit  //可选属性,当动画出场后,在

                 >

                 <div>玩转React Transition</div>

    </CSSTransition>

    <button type="primary" onClick={this.handleToggole}>Animation</button>

     

     

    )

    }

    在组件是引入动画库

     

    css动画

    • nimate.css动画库集成到react-transation-group动画模块中

    网址:https://animate.style/

    通过cdn地址下载动画库

     

    放到项目中的src/assets目录中

    集成到CssTransation组件中

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    shutil文件去重模块
    Nexus构建npm、yum、maven私有仓库
    centos7添加自定义服务到systemctl
    Sonatype nuxus私有仓库介绍
    rancher单节点备份和恢复
    rancher证书过期X509:certificate has expired or is not ye valid
    清理docker日志
    mysql 9 hash索引和B+tree索引的区别
    mysql 8 索引
    mysql 7 慢查询+慢查询工具
  • 原文地址:https://www.cnblogs.com/ht955/p/14922723.html
Copyright © 2011-2022 走看看