React笔记（八）axios以及动画react-transition-group的使用React用于给元素加动画，其

axios

react使用axios,首先下载

$npm add axios
js
import axios from 'axios'
// 发送
componentDidMount() {
    axios.get('www.baidu.com')
        .then(() => {})
        .catch(() => {});
}

react-transition-group

CSSTransition

React用于给元素加动画，其原理就是动态的给元素加上Class，从而加上动画。
属性：
in={inProp} 决定元素的显示和隐藏
timeout={200} 执行动画所用的时间
classNames="my-node" class名字用于加操作元素的css
css：

<!--入场前-->
.my-node-enter {
  opacity: 0;
}
<!--入场后-->
.my-node-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
<!--退场前-->
.my-node-exit {
  opacity: 1;
}
<!--退场后-->
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}
<!--全部class-->
classNames={{
 appear: 'my-appear',
 appearActive: 'my-active-appear',
 appearDone: 'my-done-appear',
 enter: 'my-enter',
 enterActive: 'my-active-enter',
 enterDone: 'my-done-enter',
 exit: 'my-exit',
 exitActive: 'my-active-exit',
 exitDone: 'my-done-exit',
}}

js钩子函数

onEnter

应用'enter'或'appear'类后立即触发回调。

onEntering

一个回调“输入激活状态”或“显示激活状态”类应用后，立即解雇。

onEntered

删除 'enter'或'appear'类后立即触发的回调，并将该类添加到DOM节点。done

onExit

一个应用了“退出”下课后回调立即被解雇。

onExiting

一个“退出激活状态”的应用回调后立即触发。

onExited

一个“退出”类后立即触发回调被删除和exit-done类添加到DOM节点。

TransitionGroup

TransitionGroup 是用来控制多个元素的动画用的，比如一个列表。他的作用就是省去CSSTransition里in属性的使用，需两者结合使用使用方法如下：

import {CSSTransition, TransitionGroup} from 'react-transition-group';
<TransitionGroup className="todo-list">
  {this.state.list.map((item,index) => {
    return (
      <CSSTransition
        key={item}
        timeout={800}
        classNames="alert"
        unmountOnExit
        appear={true}
        onEnter={() => setShowButton(false)}
      >
        <TodoItem content={item} itemIndex={index} listClose={this.listClose.bind(this)}></TodoItem>
      </CSSTransition>
    )
  })}
</TransitionGroup>

想实现更基础的效果可以使用Transition

React Transition Group官方文档

React笔记 （八）axios以及动画react-transition-group的使用