React中如何不使用插件实现组件出现或消失动画
React中如何不使用插件实现组件出现或消失动画
本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载
首先React本身是有动画插件的React.addons.TransitionGroup，当你使用该组件时，会添加对应的动画生命周期函数来控制动画，分别为componentWillEnter，componentDidEnter，componentWillLeave，componentDidLeave。而更高级点的ReactCSSTransitionGroup则是ReactTransitionGroup是基于ReactTransitionGroup的，在React组件进入或者离开DOM的时候，它是一种简单地执行CSS过渡和动画的方式。
今天我们来探讨的是另一种实现方式，而非使用官方的插件。先抛开React，我们一般实现动画都是添加或删除对应的动画class，这是因为DOM结构本身就存在，所以可以任意操作，而React则不同，每个组件都是有生命周期的，componentDidMount则是组件挂载到DOM结构，而componentWillUnmount则在组件被移除DOM前调用。所以我们可以使用外包一层，把控制动画的责任落在这个已经存在的DOM结构上。
简单示意如下：CustomContent为React组件，这里要实现的就是它的出现或消失动画，.animate-wrap为包裹的外层
class Page extends Component {
render() {
return (
<div className="page">
<header className="header">Header</header>
<div className="animate-wrap">
<CustomContent isShow={this.props.contentIsShow} />
</div>
</div>
)
}
}下面我们继续构造，当content隐藏的时候，.animate-wrap隐藏，当content显示的时候，显示.animate-wrap并为其添加class动画
class Page extends Component {
render() {
let { contentIsShow, toggleContent } = this.props;
return (
<div className="page">
<header className="header">Header</header>
<div ref="animateWrap" className={ contentIsShow ? "animate-wrap active down-in" : "animate-wrap"}>
<CustomContent isShow={ contentIsShow } clickHandler={ this.clickHandler.bind(this) } />
</div>
</div>
)
}
}关键css大概如下（动画设计可参看移动端重构实战系列4——进入离开动画）：
.animate-wrap{
display: none; // 默认不显示
&.active{
display: block; // active状态显示
}
}
// 进入动画
.down-in{
animation: downIn 0.3s both;
}
@keyframes downIn{
from{
transform: translate(0, 100%);
opacity: 0;
}
to{
transform: translate(0, 0);
opacity: 1;
}
}
// 离开动画
.down-out{
animation: downOut 0.3s both;
}
@keyframes downOut{
from{
transform: translate(0, 0);
opacity: 1;
}
to{
transform: translate(0, 100%);
opacity: 0;
}
}进入动画之后，动画结束之时应该去掉动画的class.donw-in，这就得使用DOM事件来处理了，在componentDidMount中添加监听事件，而在componentWillUnmount中移除监听事件
而最后content消失的时候则需要先添加down-outclass，再在动画结束之后移除该class，并且改变contentIsShow的值
// 判断使用哪个end事件
function whichEndEvent() {
var k
el = document.createElement('div');
var animations = {
"animation" : "animationend",
"WebkitAnimation": "webkitAnimationEnd"
}
for(k in animations) {
if(el.style[k] !== undefined) {
return animations[k];
}
}
}
//在前面render的基础上添加以下动画控制
class Page extends Component {
custructor(props){
supor(props);
this.animateEnd = whichEndEvent();
}
componentDidMount() {
// 监听动画结束事件，使用onAnimationEnd时，直接砍掉
let dWrap = ReactDOM.findDOMNode(this.refs.animateWrap);
dWrap.addEventListener(this.animateEnd , this.removeAnimateClass)
}
componentWillUnmount() {
// 移除动画结束事件，使用onAnimationEnd时，直接砍掉
let dWrap = ReactDOM.findDOMNode(this.refs.animateWrap);
dWrap.removeEventListener(this.animateEnd , this.removeAnimateClass)
}
removeAnimateClass() {
let dWrap = ReactDOM.findDOMNode(this.refs.animateWrap);
dWrap.classList.remove('down-in', 'down-out');
// 如果为离开，则触发action toggleContent，设置contentIsShow为false，隐藏content
if(dWrap.classLIst.contains('down-out')){
this.props.toggleContent(!this.props.contentIsShow);
}
}
clickHandler() {
// 触发离开，先添加动画class down-out，并在动画结束后调用想用的action
let dWrap = ReactDOM.findDOMNode(this.refs.animateWrap);
dWrap.classList.add('down-out');
}
}onAnimationEnd
2016-09-14更新
偶尔机会，发现React事件中已经有了onAnimationEnd，所以上面的DOM事件监听有点琐碎，可以直接砍掉，在.animate-wrap上添加 即可
class Page extends Component {
render() {
let { contentIsShow, toggleContent } = this.props;
return (
<div className="page">
<header className="header">Header</header>
<div ref="animateWrap" onAnimationEnd={ this.removeAnimateClass.bind(this) } className={ contentIsShow ? "animate-wrap active down-in" : "animate-wrap"}>
<CustomContent isShow={ contentIsShow } clickHandler={ this.clickHandler.bind(this) } />
</div>
</div>
)
}
}