React之CSS（六）

一.animation

@keyframes定义的动画在执行结束后，最后一帧结束不会保存最后一帧的效果，可以通过在设置animation: all 1s ease-in forwards;保存最后一帧效果

二.react-transition-group

1.安装

npm i react-transition-group -D

2.使用 CSSTransition

2.1 先导入
import { CSSTransition } from ‘react-transition-group’;
2.2 使用
在需要加动画的标签外层加上
如：

<CSSTransition
	in={this.state.show} //根据show的值决定是入场还是出场
	timeout={1000} //动画持续时间
	classNames='fade' //注意这里是s，并且会匹配所有fade开头的
	unmountOnExit //整个div会display：none
	onEntered={ (el) => {el.style.color='blue'}}
//当入场动画结束之后会执行 钩子函数 类似的钩子函数还有onEnter(入场动画第一帧) 			 
 	onEntering onExit onExiting onExited
	appear={true} //就是这个标签第一次展示的时候也要动画效果，会在该标签第一次入场的第一帧增加一个fade-appear { ... } ,第二帧增加 fade-appear-active { ... }
>
<div>hello</div>
</CSSTransition>

2.3 原理：
2.3.1
在入场动画执行的第一个时刻，CSSTransition这个组件会在div标签上挂载一个fade-enter {
opacity: 0;
}
在第二个时刻，会存在一个
fade-enter-active {
opacity: 1;
transition: opacity 1s ease-in;
}
当整个入场动画执行完成之后，会增加一个
fade-enter-done {
opacity: 1;
}
2.3.2
同理 出场顺序
.fade-exit{
opacity: 1;
}

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

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

3.使用TransitionGroup

里层写CSSTransition,搭配使用，实现多个组件动画切换

<TransitionGroup>
<CSSTransition
in={this.state.show} //根据show的值决定是入场还是出场
timeout={1000} //动画持续时间
classNames='fade' //注意这里是s，并且会匹配所有fade开头的
unmountOnExit //整个div会display：none
onEntered={ (el) => {el.style.color='blue'}}
//当入场动画结束之后会执行 钩子函数 类似的钩子函数还有onEnter(入场动画第一帧) onEntering onExit onExiting onExited
appear={true} //就是这个标签第一次展示的时候也要动画效果，会在该标签第一次入场的第一帧增加一个fade-appear { ... } ,第二帧增加 fade-appear-active { ... }
>
<div>hello</div>
</CSSTransition>

</TransitionGroup>