react 动画

css样式:

使用:

安装react-transition-group

npm install react-transition-group --save

安装好后，你可以先去github上来看一下文档，他是有着三个核心库（或者叫组件）。

• Transition
• CSSTransition
• TransitionGroup

使用CSSTransition

其实这个库用起来根ng-animate差不多，先来看看如何使用CSSTransition。

先用import进行引入，代码如下：

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

可以设置的css:

• xxx-enter: 进入（入场）前的CSS样式；
• xxx-enter-active:进入动画直到完成时之前的CSS样式;
• xxx-enter-done:进入完成时的CSS样式;
• xxx-exit:退出（出场）前的CSS样式;
• xxx-exit-active:退出动画知道完成时之前的的CSS样式。
• xxx-exit-done:退出完成时的CSS样式。

.input {border:3px solid #ae7000}

.boss-text-enter{
    opacity: 0;
}
.boss-text-enter-active{
    opacity: 1;
    transition: opacity 2000ms;

}
.boss-text-enter-done{
    opacity: 1;
}
.boss-text-exit{
    opacity: 1;
}
.boss-text-exit-active{
    opacity: 0;
    transition: opacity 2000ms;

}
.boss-text-exit-done{
    opacity: 0;
}

unmountOnExit 属性

学到这里，会感觉这样写也没有简化多少，更没特殊的效果

其实不是的，比如我们给加上unmountOnExit,
加上这个的意思是在元素退场时，自动把DOM也删除，这是以前用CSS动画没办法做到的。

代码:

render() { 
    return ( 
        <div>
            <CSSTransition 
                in={this.state.isShow}   //用于判断是否出现的状态
                timeout={2000}           //动画持续时间
                classNames="boss-text"   //className值，防止重复
                unmountOnExit
            >
                <div>BOSS级人物-孙悟空</div>
            </CSSTransition>
            <div><button onClick={this.toToggole}>召唤Boss</button></div>
        </div>
        );
}

加上 CSSTransition 标签:
在引入之后
这个需要放在循环的外边，这样才能形成一个组动画,
但是只有这个TransitonGroup是不够的，你还是需要加入CSSTransition,来定义动画。

总结:
React动画还有很多知识，能做出很多酷炫的效果，完全可以单独分出来一个岗位
用react-transition-group动画已经完全可以满足我的日常开发需求了。