导语
上一篇文章给大家简单演示了 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: booleandefault: 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)