React 过渡 动画

有关css的就不多说了，具体自己看文档。只是稍微在这里提个醒。

过渡

// transition 过度属性
transition:all 2s ease-in

动画

// forwards 保留动画最后一帧的效果
.hide{
  animation: item-hide 2s ease-in forwards;
}

@keyframes item-hide {
	0%{
    opacity: 1;
    color: red;
  }
	50%{
    opacity: 0.5;
    color:green;
  }
  100%{
    opacity: 0;
    color: blue
  }
}

只能实现简单的效果

官方提供了一种react-transition-group动画，在这里说明几个常用的，具体可以自己看文档。比如钩子函数
react-transition-group

安装

npm install react-transition-group -S

CSSTransition

操作单个对象

	this.state = {
			 show:true
		}

<CSSTransition
	classNames="fade" // 写样式 以 .fade开始
	in={this.state.show}  //初始状态
	timeout={1000}  //延迟
	unmountOnExit     // api 
	onEntered={(el)=>{el.style.color='blue'}} // 利用对应钩子函数改变样式
	appear={true} // 初始状态是否要动画效果
	>
	<div>hello world</div>
</CSSTransition>

	<button onClick={this.ChangeState.bind(this)}>改变</button>

	ChangeState(){
		this.setState({
			show:this.state.show ? false:true
		})
	}

style.css

.fade-enter,.fade-active{  // fade-active与appear有关
  opacity: 0;
}
.fade-enter-active,.fade-appear-active{ // fade-appear-active与appear有关
  opacity: 1;
  transition: opacity 1s ease-in
}
.fade-enter{
  opacity: 1;
}
.fade-exit-active{
  opacity: 1;
  transition: opacity 1s ease-in
}
.fade-exit-done{
  opacity: 0;
}

TransitionGroup

          <ListGroup>
          <TransitionGroup className="todo-list">  // 最外层包裹
            {items.map(({ id, text }) => (
              <CSSTransition      // 包裹单独item
                key={id}
                timeout={500}
                classNames="fade"
              >
                <ListGroupItem>
                  <Button
                    onClick={() => {
                      this.setState(preventState => {
                        items: [...items,'新增项'] // 追加元素
                      }));
                    }}
                  >
                  </Button>
                </ListGroupItem>
              </CSSTransition>
            ))}
          </TransitionGroup>
          </ListGroup>

如有问题，欢迎斧正