react-transition-group 升级指南

这只是一篇个人记录文章。

使用react-router切换页面显得有些单调乏味。所以我们会使用react-transition-group 来进行一些动画的设置，主要是路由的进出动画，当然也可以做其他的动画展示，只是css3 的问题。

react-transition-group 用的大多是1.2.0 或者 1.1.1 的版本，现在是2.2.2的版本，API基本上都变化了。

Note:ReactTransitionGroup和ReactCSSTransitionGroup已被移动到由社区维护的react-transition-group包。它的1.x分支与现有的插件完全是API兼容的。请在新的存储库中提出错误和功能请求。

transitionName -> classNames
transitionEnterTimeout and transitionLeaveTimeout -> timeout={{ exit, enter }}
transitionAppear -> appear
transitionEnter -> enter
transitionLeave -> exit

API 的更换对应着css的class也需要更换，不过只需更换一个。leave->exit

官方文档中已经给了两个Demo 对比，这里我就把自己的Demo写一下。

相同的功能，分别用v1 和v2 来写一下。

功能就是路由的切换动画，

这里依赖的版本是

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",

V1 版本

"react-transition-group": "^1.1.1"

import React from 'react';
import {render} from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import {Link, BrowserRouter, Route, NavLink, Switch} from 'react-router-dom';
import {CSSTransitionGroup} from 'react-transition-group';
import Com1 from './components/com1';
import Com2 from './components/com2';
import Com3 from './components/com3';
import './app.css'
const leftNav = () => {
  return (
    <nav>
      <ul>
        <li><NavLink activeStyle={{color: 'blue'}} to="/com1">com1</NavLink></li>
        <li><NavLink activeStyle={{color: 'blue'}} to="/com2">com2</NavLink></li>
        <li><NavLink activeStyle={{color: 'blue'}} to="/com3">com3</NavLink></li>
      </ul>
    </nav>
  )
};
class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Route render={({location}) => (
          <div style={{position: 'absolute', left: '400px'}}>
            <div>
              {leftNav()}
            </div>
            <div>
              <CSSTransitionGroup
                transitionName="example"
                transitionAppear={true}
                transitionAppearTimeout={500}
                transitionEnterTimeout={500}
                transitionLeaveTimeout={300}
              >
                <div key={location.pathname}
                     style={{position: 'absolute', width: '200px', background: 'lightblue', height: '100px'}}>
                  <Switch key={location.key} location={location}>
                    <Route exact path="/" component={Com1}/>
                    <Route exact path="/com1" component={Com1}/>
                    <Route exact path="/com2" component={Com2}/>
                    <Route exact path="/com3" component={Com3}/>
                  </Switch>
                </div>
              </CSSTransitionGroup>
            </div>
          </div>
        )}/>
      </BrowserRouter>
    )
  }
};

var root = document.getElementById('app');
render(
  <App/>
  , root)

对应的CSS

.example-enter {
    opacity: 0;
    transform: translateX(100%);
}

.example-enter.example-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all .5s ease-in;
}

.example-leave {
    opacity: 1;
    transform: translateX(0);
}

.example-leave.example-leave-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: all .3s ease-out;
}


.example-appear {
    opacity: 0.01;
}
.example-appear.example-appear-active {
    opacity: 1;
    transition: opacity .5s ease-in;
}

V2 版本

"react-transition-group": "^2.2.0"

import React from 'react';
import {render} from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import {Link, BrowserRouter, Route, NavLink, Switch} from 'react-router-dom';
import {TransitionGroup,CSSTransition} from 'react-transition-group';
import Com1 from './components/com1';
import Com2 from './components/com2';
import Com3 from './components/com3';
import './app.css'
const leftNav = () => {
  return (
    <nav>
      <ul>
        <li><NavLink activeStyle={{color: 'blue'}} to="/com1">com1</NavLink></li>
        <li><NavLink activeStyle={{color: 'blue'}} to="/com2">com2</NavLink></li>
        <li><NavLink activeStyle={{color: 'blue'}} to="/com3">com3</NavLink></li>
      </ul>
    </nav>
  )
};
class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Route render={({location}) => (
          <div style={{position: 'absolute', left: '400px'}}>
            <div>
              {leftNav()}
            </div>
            <div>
              <TransitionGroup>
                <CSSTransition key={location.key} classNames="example" timeout={{enter: 500, exit: 300}}>
                <div key={location.pathname}
                     style={{position: 'absolute', width: '200px', background: 'lightblue', height: '100px'}}>
                  <Switch key={location.key} location={location}>
                    <Route exact path="/" component={Com1}/>
                    <Route exact path="/com1" component={Com1}/>
                    <Route exact path="/com2" component={Com2}/>
                    <Route exact path="/com3" component={Com3}/>
                  </Switch>
                </div>
                </CSSTransition>
              </TransitionGroup>
            </div>
          </div>
        )}/>
      </BrowserRouter>
    )
  }
};

var root = document.getElementById('app');
render(
  <App/>

对应的CSS

.example-enter {
    opacity: 0;
    transform: translateX(100%);
}

.example-enter.example-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all .5s ease-in;
}

.example-exit {
    opacity: 1;
    transform: translateX(0);
}

.example-exit.example-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: all .3s ease-out;
}


.example-appear {
    opacity: 0.01;
}
.example-appear.example-appear-active {
    opacity: 1;
    transition: opacity .5s ease-in;
}

具体对应关系在官方文档中已经很明确的指出，这里不再赘述。

react-transition-group 升级指南

V1 版本

V2 版本

文章评论