1 Star 0 Fork 0

ant-design-1x / ant-design-1x

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
demo-0.6951014822363506.html 6.04 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
xrkffgg 提交于 2020-07-16 14:51 . init 1.x
<!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>
1
https://gitee.com/ant-design-1x/ant-design-1x.git
git@gitee.com:ant-design-1x/ant-design-1x.git
ant-design-1x
ant-design-1x
ant-design-1x
master

搜索帮助

14c37bed 8189591 565d56ea 8189591