代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="../index.css" />
<style>
html, body {
height: 100%;
margin: 0;
background: none;
}
#components-queue-anim-demo-router iframe {
height: 260px;
}
#components-queue-anim-demo-router .demo-router-wrap {
position: relative;
width: 100%;
margin: auto;
height:200px;
overflow: hidden;
}
#components-queue-anim-demo-router .queue-anim-leaving {
position: absolute;
width:100%;
}
</style>
</head>
<body>
<div id="components-queue-anim-demo-router" class="code-box-demo"></div>
<script>
function require(module) {
if (module === 'react-router') {
return window.ReactRouter;
}
return window.parent[module];
}
var mountNode = document.getElementById('components-queue-anim-demo-router');
</script>
<script src="https://unpkg.com/react/dist/react.js"></script>
<script src="https://unpkg.com/react-dom/dist/react-dom.js"></script>
<script src="https://unpkg.com/react-router/umd/ReactRouter.js"></script>
<script>
'use strict';
var _antd = require('antd');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var hashHistory = ReactRouter.hashHistory;
function App(props) {
var key = props.location.pathname;
var keys = key.replace('/', '') ? [key.replace('/', '')] : ['home'];
return React.createElement(
'div',
null,
React.createElement(
_antd.Menu,
{ style: { marginBottom: 10 }, mode: 'horizontal', selectedKeys: keys },
React.createElement(
_antd.Menu.Item,
{ key: 'home' },
React.createElement(
Link,
{ to: '/' },
'首页'
)
),
React.createElement(
_antd.Menu.Item,
{ key: 'page1' },
React.createElement(
Link,
{ to: '/page1' },
'Page 1'
)
),
React.createElement(
_antd.Menu.Item,
{ key: 'page2' },
React.createElement(
Link,
{ to: '/page2' },
'Page 2'
)
)
),
React.createElement(
_antd.QueueAnim,
{ type: ['right', 'left'], className: 'demo-router-wrap' },
React.cloneElement(props.children || React.createElement(Home, null), { key: key })
)
);
}
function Home() {
return React.createElement(
'div',
{ className: 'demo-router-child' },
React.createElement(
_antd.QueueAnim,
{ className: 'demo-content' },
React.createElement(
'div',
{ className: 'demo-kp', key: 'a' },
React.createElement(
_antd.QueueAnim,
{ component: 'ul' },
React.createElement('li', { key: '0' }),
React.createElement('li', { key: '1' }),
React.createElement('li', { key: '2' })
)
),
React.createElement(
'div',
{ className: 'demo-kp', key: 'b' },
React.createElement(
_antd.QueueAnim,
{ component: 'ul' },
React.createElement('li', { key: '0' }),
React.createElement('li', { key: '1' }),
React.createElement('li', { key: '2' })
)
),
React.createElement(
'div',
{ className: 'demo-kp', key: 'c' },
React.createElement(
_antd.QueueAnim,
{ component: 'ul' },
React.createElement('li', { key: '0' }),
React.createElement('li', { key: '1' }),
React.createElement('li', { key: '2' })
)
)
)
);
}
function Page1() {
return React.createElement(
'div',
{ className: 'demo-router-child' },
React.createElement(
_antd.QueueAnim,
{ className: 'demo-content' },
React.createElement(
'div',
{ className: 'demo-kp', key: 'b' },
React.createElement(
_antd.QueueAnim,
{ component: 'ul' },
React.createElement('li', { key: '0' }),
React.createElement('li', { key: '1' }),
React.createElement('li', { key: '2' })
)
),
React.createElement(
'div',
{ className: 'demo-listBox' },
React.createElement(
_antd.QueueAnim,
{ className: 'demo-list', delay: 200 },
React.createElement('div', { className: 'title', key: 'title3' }),
React.createElement(
_antd.QueueAnim,
{ component: 'ul', animConfig: { opacity: [1, 0], translateY: [0, 30], scale: [1, 0.9] }, key: 'ul' },
React.createElement('li', { key: '0' }),
React.createElement('li', { key: '1' }),
React.createElement('li', { key: '2' })
)
)
)
)
);
}
function Page2() {
return React.createElement(
'div',
{ className: 'demo-router-child' },
React.createElement(
'div',
{ className: 'demo-content' },
React.createElement(
'div',
{ className: 'demo-listBox' },
React.createElement(
_antd.QueueAnim,
{ className: 'demo-list' },
React.createElement('div', { className: 'title', key: 'title3' }),
React.createElement(
_antd.QueueAnim,
{ component: 'ul', animConfig: { opacity: [1, 0], translateY: [0, 30], scale: [1, 0.9] }, key: 'li' },
React.createElement('li', { key: '0' }),
React.createElement('li', { key: '1' }),
React.createElement('li', { key: '2' }),
React.createElement('li', { key: '3' }),
React.createElement('li', { key: '4' }),
React.createElement('li', { key: '5' })
)
)
)
)
);
}
ReactDOM.render(React.createElement(
Router,
{ history: hashHistory },
React.createElement(
Route,
{ path: '/', component: App, ignoreScrollBehavior: true },
React.createElement(Route, { path: 'page1', component: Page1 }),
React.createElement(Route, { path: 'page2', component: Page2 })
)
), mountNode);
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。