React动画效果
平常我们使用的动画效果大多和jQuery.animate()
相关,但是React
就是被用来取代jQuery
的。所以在动画实现的选择上我们常常选择CSS3
的原生支持来实现。
但是,CSS3
的动画过程是:“在什么时间范围内,以什么样的运动节奏完成动画”
。在用原生CSS3
实现动画时,不好调试,因为动画过程可能一闪而过,并且在React
中,样式的渲染必须等到组件已经挂载完成后,那么在组件加载和卸载的过程中我们是无法实现动画的。
所以React
提供了一个叫ReactCSSTransitionGroup
的组件辅助实现动画功能。
ReactCSSTransitionGroup组件安装
npm install --save react-addons-css-transition-group
组件规则
组件属性
transitionAppear
:false | true , 首次装载时使用。
transitionEnter
:false | true, 组件挂载时使用,不包含首次挂载。
transitionLeave
:false | true, 组件卸载时使用。
transitionName
:String, 用户自定义样式。
transitionEnterTimeout
:Number, 组件挂载时动画过度时间,单位ms。
transitionLeaveTimeout
:Number, 组件卸载时动画过度时间,单位ms。
enter:挂载,leave:卸载,appear:首次挂载。这3种状态分别对应6种样式。
分别为:
[name]-enter:组件挂载前的样式。
[name]-enter-active:组件挂载完成后的样式。
[name]-leave:组件卸载前的样式。
[name]-leave-active:组件卸载完成后的样式。
[name]-appear:组件首次挂载前的样式。
[name]-appear-active:组件首次挂载完成后的样式。
示例
import React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import "../index.css"
export default class App extends React.Component {
render() {
return (
<ReactCSSTransitionGroup
transitionName='example'
transitionAppear={true}
transitionAppearTimeout={500}
>
<div className="css-test">
Hello React CSS Transition Group!
</div>
</ReactCSSTransitionGroup>
)
}
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.css-test{
width: 300px;
height: 300px;
background-color: #b1a1a1;
text-align: center;
line-height: 300px;
margin: 100px auto;
}
.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
.example-appear {
opacity: 0.01;
}
.example-appear.example-appear-active {
opacity: 1;
transition: opacity .5s ease-in;
}
上面代码的效果:页面刷新时,组件会呈现淡入效果。
ReactCSSTransitionGroup并非脱了css3原生样式,反而它非常依赖css3的动画样式,只是它对组件的生命周期做了进一步处理,使动画能存在于整个组件的生命周期。