<commit_before># Router 默认进出场

- order: 7

router 组合的进场与出场动画。

---

````jsx
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var QueueAnim = antd.QueueAnim;
var Menu = antd.Menu;

var App = React.createClass({
  render() {
    var key = this.props.location.pathname;
    var keys = key.replace('/','') ? [ key.replace('/','') ] : [ 'home' ];
    return (
      <div>
        <Menu style={{marginBottom: 10}} mode="horizontal" selectedKeys={keys}>
          <Menu.Item key='home'>
            <Link to="/">首页</Link>
          </Menu.Item>
          <Menu.Item key='page1'>
            <Link to="/page1">Page 1</Link>
          </Menu.Item>
          <Menu.Item key='page2'>
            <Link to="/page2">Page 2</Link>
          </Menu.Item>
        </Menu>
        <QueueAnim type={['right','left']} className='demo-router-wap'>
          {React.cloneElement(this.props.children||<Home/>, {key: key})}
        </QueueAnim>
      </div>
    );
  }
});
var Home = React.createClass({
  render() {
    return (
      <div className='demo-router-child'>
        <QueueAnim className="demo-content">
          <div className="demo-kp" key='a'>
            <QueueAnim component='ul'>
              <li key='t_li0'></li>
              <li key='t_li1'></li>
              <li key='t_li2'></li>
            </QueueAnim>
          </div>
          <div className="demo-kp" key='b'>
            <QueueAnim component='ul'>
              <li key='t_li0'></li>
              <li key='t_li1'></li>
              <li key='t_li2'></li>
            </QueueAnim>
          </div>
          <div className="demo-kp" key='c'>
            <QueueAnim component='ul'>
              <li key='t_li0'></li>
              <li key='t_li1'></li>
              <li key='t_li2'></li>
            </QueueAnim>
          </div>
        </QueueAnim>
      </div>
    );
  }
})
var Page1 = React.createClass({
  render() {
    return (
      <div className='demo-router-child'>
        <QueueAnim className="demo-content">
          <div className="demo-kp" key='b'>
            <QueueAnim component='ul'>
              <li key='t_li0'></li>
              <li key='t_li1'></li>
              <li key='t_li2'></li>
            </QueueAnim>
          </div>
          <div className="demo-listBox">
            <QueueAnim className="demo-list" delay={200}>
              <div className="title" key='title3'></div>
              <QueueAnim component='ul' type='bottom' key='ul'>
                <li key='tt_li0'></li>
                <li key='tt_li1'></li>
                <li key='tt_li2'></li>
              </QueueAnim>
            </QueueAnim>
          </div>
        </QueueAnim>
      </div>
    );
  }
});
var Page2 = React.createClass({
  render() {
    return (
      <div className='demo-router-child'>
        <div className="demo-content" >
          <div className="demo-listBox">
            <QueueAnim className="demo-list">
              <div className="title" key='title3'></div>
              <QueueAnim component='ul' type='bottom' key='li'>
                <li key='tt_li0'></li>
                <li key='tt_li1'></li>
                <li key='tt_li2'></li>
                <li key='tt_li3'></li>
                <li key='tt_li4'></li>
              </QueueAnim>
            </QueueAnim>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render((
  <Router>
    <Route path="/" component={App} ignoreScrollBehavior>
      <Route path="page1" component={Page1} />
      <Route path="page2" component={Page2} />
    </Route>
  </Router>
), document.getElementById('components-queue-anim-demo-router'));
````<commit_msg>update router animation<commit_after># Router 默认进出场

- order: 7

router 组合的进场与出场动画。

---

````jsx
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var QueueAnim = antd.QueueAnim;
var Menu = antd.Menu;

var App = React.createClass({
  render() {
    var key = this.props.location.pathname;
    var keys = key.replace('/','') ? [ key.replace('/','') ] : [ 'home' ];
    return (
      <div>
        <Menu style={{marginBottom: 10}} mode="horizontal" selectedKeys={keys}>
          <Menu.Item key='home'>
            <Link to="/">首页</Link>
          </Menu.Item>
          <Menu.Item key='page1'>
            <Link to="/page1">Page 1</Link>
          </Menu.Item>
          <Menu.Item key='page2'>
            <Link to="/page2">Page 2</Link>
          </Menu.Item>
        </Menu>
        <QueueAnim type={['right','left']} className='demo-router-wap'>
          {React.cloneElement(this.props.children||<Home/>, {key: key})}
        </QueueAnim>
      </div>
    );
  }
});
var Home = React.createClass({
  render() {
    return (
      <div className='demo-router-child'>
        <QueueAnim className="demo-content">
          <div className="demo-kp" key='a'>
            <QueueAnim component='ul'>
              <li key='t_li0'></li>
              <li key='t_li1'></li>
              <li key='t_li2'></li>
            </QueueAnim>
          </div>
          <div className="demo-kp" key='b'>
            <QueueAnim component='ul'>
              <li key='t_li0'></li>
              <li key='t_li1'></li>
              <li key='t_li2'></li>
            </QueueAnim>
          </div>
          <div className="demo-kp" key='c'>
            <QueueAnim component='ul'>
              <li key='t_li0'></li>
              <li key='t_li1'></li>
              <li key='t_li2'></li>
            </QueueAnim>
          </div>
        </QueueAnim>
      </div>
    );
  }
})
var Page1 = React.createClass({
  render() {
    return (
      <div className='demo-router-child'>
        <QueueAnim className="demo-content">
          <div className="demo-kp" key='b'>
            <QueueAnim component='ul'>
              <li key='t_li0'></li>
              <li key='t_li1'></li>
              <li key='t_li2'></li>
            </QueueAnim>
          </div>
          <div className="demo-listBox">
            <QueueAnim className="demo-list" delay={200}>
              <div className="title" key='title3'></div>
              <QueueAnim component='ul' animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key='ul'>
                <li key='tt_li0'></li>
                <li key='tt_li1'></li>
                <li key='tt_li2'></li>
              </QueueAnim>
            </QueueAnim>
          </div>
        </QueueAnim>
      </div>
    );
  }
});
var Page2 = React.createClass({
  render() {
    return (
      <div className='demo-router-child'>
        <div className="demo-content" >
          <div className="demo-listBox">
            <QueueAnim className="demo-list">
              <div className="title" key='title3'></div>
              <QueueAnim component='ul' animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key='li'>
                <li key='tt_li0'></li>
                <li key='tt_li1'></li>
                <li key='tt_li2'></li>
                <li key='tt_li3'></li>
                <li key='tt_li4'></li>
              </QueueAnim>
            </QueueAnim>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render((
  <Router>
    <Route path="/" component={App} ignoreScrollBehavior>
      <Route path="page1" component={Page1} />
      <Route path="page2" component={Page2} />
    </Route>
  </Router>
), document.getElementById('components-queue-anim-demo-router'));
````
{'fraction_non_alphanumeric': 0.1854709952102182, 'fraction_numerical': 0.012772751463544438, 'mean_word_length': 1.7996275605214154, 'pattern_counts': {'":': 0, '<': 221, '<?xml version=': 0, '>': 221, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1064108', 'n_tokens_mistral': 2461, 'n_tokens_neox': 2428, 'n_words': 438}