结一

6个月前
  • 980

    浏览
  • 0

    评论
  • 0

    收藏

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>
        )
    }
}
0 条评论