zoukankan      html  css  js  c++  java
  • React之动画库使用--react-transition-group

    ## 安装react-transition-group ##

    npm install react-transition-group --save 或者 npm i react-transition-group -S

    ## 使用react-transition-group##

    react-transition-group有三类动画库:

    • Transition
    • CSSTransition
    • TransitionGroup

    例子引入CSSTransition动画库:

    import  {CSSTransition}  from 'react-transition-group'

    ##使用案例##

     

    <CSSTransition 
            in={this.state.isShow}   //用于判断是否出现的状态
            timeout={2000}           //动画持续时间
            classNames="animation"   //className值,防止重复
            unmountOnExit // 退出动画事,删除DOM
     >
            <div>动画展示区</div>
    </CSSTransition>

    CSS常用特效:
    xxx-enter: 进入(入场)前的CSS样式;
    xxx-enter-active:进入动画直到完成时之前的CSS样式;
    xxx-enter-done:进入完成时的CSS样式;
    xxx-exit:退出(出场)前的CSS样式;
    xxx-exit-active:退出动画知道完成时之前的的CSS样式。
    xxx-exit-done:退出完成时的CSS样式。

    CSS代码如下:
    .animation-enter{
      opacity: 0;
    }
    .animation-enter-active{
      opacity: 1;
      color:#ff0000;
      transition: opacity 2000ms;

    }
    .animation-enter-done{
      opacity: 1;
        color:#e70000;
    }
    .animation-exit{
      opacity: 1;
        color:#666;
    }
    .animation-exit-active{
      opacity: 0;
      transition: opacity 3000ms;

    }
    .animation-exit-done{
      opacity: 0;
    }

     



  • 相关阅读:
    struts2 类型转化(typeConverter)
    appfuse-maven-plugin(AMP)
    多项式求和,素数判定 HDU2011.2012
    A+B problems
    黑马程序员----java基础笔记中(毕向东)
    2015Web前端攻城之路
    黑马程序员----java基础笔记上(毕向东)
    黑马程序员----2015黑马之路-启程
    乱弹琴20140421
    读Thinking in java 4
  • 原文地址:https://www.cnblogs.com/linjiu0505/p/11896406.html
Copyright © 2011-2022 走看看