React Transition Group -- CSSTransition 组件
导语
上一篇文章给大家简单演示了 Transition组件，今天给大家介绍一下 React Transition Group 的第二个组件：CSSTransition 组件。
CSSTransition
此Transition组件用于CSS动画过渡，灵感来源于ng-animate库。
CSSTransition：在组件淡入appear，进场enter,出场exit时，CSSTransition组件应用了一系列className名来对这些动作进行描述。首先appear被应用到组件className上，接着添加“active”类名来激活CSS动画。在动画完成后，原class改变为done表明组件动画已经应用完成并加载完成。
当组件的in属性变为true时，组件的className将被赋值为example-enter，并在下一刻添加example-enter-active的CSS class名。这些都是基于className属性的约定。即：原组件带有classname="animate-rotate"，则enter状态时，变为"animate-rotate-enter"。
看完了基本介绍，下面来一个最基本的例子：
第一步：引入文件
import React,{ Component } from 'react'
import CSSTransition from 'react-transition-group/CSSTransition'
import './css/index.css'第二步：定义CSSTransition 组件的一些属性以及类的state
state = {
show: true
}
<CSSTransition
in={this.state.show}
classNames='show'
timeout={300}
unmountOnExit>
</CSSTransition>第三步：编写内部组件以及一些样式
<div className='circle' onClick={()=>this.setState(state=>({show: !state.show}))}>
show
</div>
//index.css
.circle {
margin: 2px;
width: 50px;
height: 50px;
position: absolute;
display: inline-block;
left: 100px;
box-shadow: 0px 1px 2px #999;
text-shadow: 0px 1px 2px #999;
line-height: 80px;
text-align: center;
color: white;
font-size: 10px;
}第四步：根据CSSTransition 配置的ClassNames属性编写css样式
//index.css
.show-enter {
opacity: 0.01;
transform: scale(0.9) translateY(50%);
}
.show-enter-active {
opacity: 1;
transform: scale(1) translateY(0%);
transition: all 300ms ease-out;
}
.show-exit {
opacity: 1;
transform: scale(1) translateY(0%);
}
.show-exit-active {
opacity: 0.01;
transform: scale(0.9) translateY(50%);
transition: all 300ms ease-out;
}效果图：
完整代码
//index.js
import React,{ Component } from 'react'
import CSSTransition from 'react-transition-group/CSSTransition'
import './css/index.css'
export default class App extends Component {
state = {
show: true
}
render () {
return (
<CSSTransition
in={this.state.show}
classNames='show'
timeout={300}
unmountOnExit>
{state => {
// console.log(state)
return (
<div className='circle' onClick={()=>this.setState(state=>({show: !state.show}))}>
show
</div>
)
}}
</CSSTransition>
)
}
}
//index.css
.circle {
margin: 2px;
width: 50px;
height: 50px;
position: absolute;
display: inline-block;
left: 100px;
box-shadow: 0px 1px 2px #999;
text-shadow: 0px 1px 2px #999;
line-height: 80px;
text-align: center;
color: white;
font-size: 10px;
}
.show-enter {
opacity: 0.01;
transform: scale(0.9) translateY(50%);
}
.show-enter-active {
opacity: 1;
transform: scale(1) translateY(0%);
transition: all 300ms ease-out;
}
.show-exit {
opacity: 1;
transform: scale(1) translateY(0%);
}
.show-exit-active {
opacity: 0.01;
transform: scale(0.9) translateY(50%);
transition: all 300ms ease-out;
}Props
in
控制组件应用动画的属性值，通常将一个react的组件state赋值给它，通过改变state，从而开启和关闭动画
type: boolean
default: false
classNames
classNames[注意带s]属性用于当组件被应用动画时，不同的动画状态（enter,exits,done）将作为className属性的后缀来拼接为新的className，如：
classname="fade"会被应用为fade-enter,fade-enter-active,fade-enter-done,fade-exit,fade-exite-active,fade-exit-done, fade-appear以及fade-appear-active.每一个独立的className都对应着单独的状态。
type: string | { appear?: string, appearActive?: string, enter?: string, enterActive?: string, enterDone?: string, exit?: string, exitActive?: string, exitDone?: string, }
onEnter
<Transition>组件的回调函数，当组件enter或appear时会立即调用。
type: Function(node: HtmlElement, isAppearing: bool)
onEntering
也是一个过渡组件的回调函数，当组件enter-active或appear-active时，立即调用此函数
type: Function(node: HtmlElement, isAppearing: bool)
onEntered
同样是回调函数，当组件的enter,appearclassName被移除时，意即调用此函数
type: Function(node: HtmlElement, isAppearing: bool)
onExit
当组件应用exit类名时，调用此函数
type: Function(node: HtmlElement)
onExiting
当组件应用exit-active类名时，调用此函数
type: Function(node: HtmlElement)
onExited
当组件exit类名被移除，且添加了exit-done类名时，调用此函数
type: Function(node: HtmlElement)