简书项目开发笔记总结-3-React CSS过渡动画的使用

1.借助CSS3中transition实现`

2.animation

.hide{
	animation:hide-item 2s ease-in forwards
}

@keyframes hide-item {
	0% {
		opacity:1,
		color:#090
	}
	50% {
		opacity:0.5,
		color:#09f
	}
	100% {
		opacity:0,
		color:#f00
	}
}

3.react-transition-group-单个元素动画效果

<CSSTransition
	in = {this.state.show}
	timeout = {1000}
    classNames = "fade"
    unmountOnExit
    onEntered = { (el) => el.style.color = "#f00" }
    appear = {true}
>
   <h2>App组件</h2>
</CSSTransition>


.fade-enter, .fade-appear{
  opacity: 0;
}

.fade-enter-active, .fade-appear-active{
  opacity: 1;
  transition: opacity 2s ease-in;
}

.fade-enter-done {
  opacity: 1;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 2s ease-in;
}

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

4.react-transition-group-多个元素的动画效果

<TransitionGroup>
	{
    	this.state.list.map((value,index) => {
        	return (
            	<CSSTransition
                	in = {this.state.show}
                  	timeout = {1000}
                  	classNames = "fade"
                  	unmountOnExit
                  	onEntered = { (el) => el.style.color = "#f00" }
                  	appear = {true}
                  	key={index}
                >
                  	<div>{value}</div>
                </CSSTransition>
            )
        })
    }
</TransitionGroup>