mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-23 11:46:44 +10:00
2219 lines
103 KiB
HTML
2219 lines
103 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<meta name="description" content="一个 UI 设计语言"/>
|
|
<title>
|
|
QueueAnim 进出场动画 - Ant Design
|
|
</title>
|
|
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
|
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
|
|
|
<link rel="stylesheet" href="../../dist/demo.css">
|
|
<link rel="stylesheet" href="../../static/style.css">
|
|
<link rel="stylesheet" href="../../static/tomorrow.css">
|
|
<!--[if IE 8]>
|
|
<script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
|
|
<![endif]-->
|
|
<script>
|
|
(function (con) {
|
|
'use strict';
|
|
var prop, method;
|
|
var empty = {};
|
|
var dummy = function () {
|
|
};
|
|
var properties = 'memory'.split(',');
|
|
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
|
|
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
|
|
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
|
|
while (prop = properties.pop()) {
|
|
con[prop] = con[prop] || empty;
|
|
}
|
|
while (method = methods.pop()) {
|
|
con[method] = con[method] || dummy;
|
|
}
|
|
})(this.console = this.console || {});
|
|
</script>
|
|
<script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.1.10/es5-shim.js,es5-shim/4.1.10/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
|
|
<script>
|
|
(function() {
|
|
window.ANT_COMPONENTS = [];
|
|
window.InstantClickChangeFns = [];
|
|
ANT_COMPONENTS.push({
|
|
title: 'Pagination',
|
|
desc: '分页'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Affix',
|
|
desc: '固钉'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Badge',
|
|
desc: '徽标数'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Breadcrumb',
|
|
desc: '面包屑'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Button',
|
|
desc: '按钮'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Carousel',
|
|
desc: '走马灯'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Checkbox',
|
|
desc: '多选框'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Collapse',
|
|
desc: '折叠面板'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Datepicker',
|
|
desc: '日期选择框'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Dropdown',
|
|
desc: '下拉菜单'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Form',
|
|
desc: '表单'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Iconfont',
|
|
desc: '字体图标'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'InputNumber',
|
|
desc: '数字输入框'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Layout',
|
|
desc: '布局'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Menu',
|
|
desc: '导航菜单'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Message',
|
|
desc: '全局提示'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Modal',
|
|
desc: '对话框'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Notification',
|
|
desc: '通知提醒框'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Alert',
|
|
desc: '警告提示'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Popconfirm',
|
|
desc: '气泡确认框'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Popover',
|
|
desc: '气泡卡片'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Progress',
|
|
desc: '进度条'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'QueueAnim',
|
|
desc: '进出场动画'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Radio',
|
|
desc: '单选框'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Select',
|
|
desc: '选择器'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Slider',
|
|
desc: '滑动输入条'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Steps',
|
|
desc: '步骤条'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Switch',
|
|
desc: '开关'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Table',
|
|
desc: '表格'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Tabs',
|
|
desc: '标签页'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Tag',
|
|
desc: '标签'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Timeline',
|
|
desc: '时间轴'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Tooltip',
|
|
desc: '文字提示'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Tree',
|
|
desc: '树形控件'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Upload',
|
|
desc: '文件上传'
|
|
});
|
|
ANT_COMPONENTS.push({
|
|
title: 'Validation',
|
|
desc: '表单校验'
|
|
});
|
|
var i = location.pathname.split('/').lastIndexOf('ant-design');
|
|
if (i > 0) {
|
|
window.rootUrl = location.origin + location.pathname.split('/').slice(0, 2+1).join('/');
|
|
} else {
|
|
window.rootUrl = location.origin;
|
|
}
|
|
})();
|
|
</script>
|
|
<script src="../../static/script.js"></script>
|
|
<script>
|
|
window.antdVersion = {
|
|
latest: '0.10.0-beta7',
|
|
stable: '0.9.2'
|
|
};
|
|
</script>
|
|
<script src="../../dist/demo.js"></script>
|
|
<script>
|
|
window.require = function (path) {
|
|
var result = window;
|
|
var namespaces = path.split('/');
|
|
namespaces.forEach(function (key, i) {
|
|
if (i !== 0 && i === namespaces.length - 1) {
|
|
key = capitalizeFirstLetter(key);
|
|
}
|
|
if (key !== 'lib') {
|
|
if (result[key]) {
|
|
result = result[key];
|
|
} else {
|
|
throw 'There should not have modules here 2.';
|
|
}
|
|
}
|
|
});
|
|
function capitalizeFirstLetter(string) {
|
|
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
}
|
|
|
|
return result;
|
|
};
|
|
</script>
|
|
|
|
</head>
|
|
<body >
|
|
<header id="header" class="clearfix">
|
|
<a class="logo" href="../..">
|
|
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
|
Ant Design
|
|
</a>
|
|
<div class="search">
|
|
<div id="autoComplete"></div>
|
|
</div>
|
|
<nav class="nav">
|
|
<span class="bar"></span>
|
|
<ul>
|
|
<li class="">
|
|
<a href="../.." data-no-instant>首页</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../spec/introduce">设计</a>
|
|
</li>
|
|
<li>
|
|
<a class="nav-link-disabled" href="">案例</a>
|
|
</li>
|
|
<li class="current">
|
|
<a href="../../docs/introduce">React</a>
|
|
</li>
|
|
<li>
|
|
<a target="_blank" href="https://github.com/ant-design/ant-design">Github</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="nav-phone-icon"></div>
|
|
</header>
|
|
<div class="main-wrapper">
|
|
|
|
<aside class="aside-container">
|
|
<ul>
|
|
<li class="">
|
|
<a href="../../docs/introduce" class="">
|
|
Ant Design of React
|
|
<span class="chinese"></span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../docs/getting-started" class="">
|
|
快速上手
|
|
<span class="chinese"></span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../docs/install" class="">
|
|
安装
|
|
<span class="chinese"></span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../changelog" class="">
|
|
更新日志
|
|
<span class="chinese"></span>
|
|
</a>
|
|
</li>
|
|
<li open="open">
|
|
<h4>Components</h4>
|
|
<ul class="">
|
|
<li class="type-divider">基本</li>
|
|
<li class="">
|
|
<a href="../button/"
|
|
class="">
|
|
Button
|
|
<span class="chinese">按钮</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../iconfont/"
|
|
class=""data-no-instant>
|
|
Iconfont
|
|
<span class="chinese">字体图标</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../layout/"
|
|
class="">
|
|
Layout
|
|
<span class="chinese">布局</span>
|
|
</a>
|
|
</li>
|
|
<li class="type-divider">表单</li>
|
|
<li class="">
|
|
<a href="../checkbox/"
|
|
class="">
|
|
Checkbox
|
|
<span class="chinese">多选框</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../datepicker/"
|
|
class="">
|
|
Datepicker
|
|
<span class="chinese">日期选择框</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../form/"
|
|
class="">
|
|
Form
|
|
<span class="chinese">表单</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../input-number/"
|
|
class="">
|
|
InputNumber
|
|
<span class="chinese">数字输入框</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../radio/"
|
|
class="">
|
|
Radio
|
|
<span class="chinese">单选框</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../select/"
|
|
class="">
|
|
Select
|
|
<span class="chinese">选择器</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../slider/"
|
|
class="">
|
|
Slider
|
|
<span class="chinese">滑动输入条</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../switch/"
|
|
class="">
|
|
Switch
|
|
<span class="chinese">开关</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../upload/"
|
|
class="">
|
|
Upload
|
|
<span class="chinese">文件上传</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../validation/"
|
|
class="">
|
|
Validation
|
|
<span class="chinese">表单校验</span>
|
|
</a>
|
|
</li>
|
|
<li class="type-divider">展示</li>
|
|
<li class="">
|
|
<a href="../alert/"
|
|
class="">
|
|
Alert
|
|
<span class="chinese">警告提示</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../badge/"
|
|
class="">
|
|
Badge
|
|
<span class="chinese">徽标数</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../carousel/"
|
|
class="">
|
|
Carousel
|
|
<span class="chinese">走马灯</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../collapse/"
|
|
class="">
|
|
Collapse
|
|
<span class="chinese">折叠面板</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../dropdown/"
|
|
class="">
|
|
Dropdown
|
|
<span class="chinese">下拉菜单</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../message/"
|
|
class="">
|
|
Message
|
|
<span class="chinese">全局提示</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../modal/"
|
|
class="">
|
|
Modal
|
|
<span class="chinese">对话框</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../notification/"
|
|
class="">
|
|
Notification
|
|
<span class="chinese">通知提醒框</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../popconfirm/"
|
|
class="">
|
|
Popconfirm
|
|
<span class="chinese">气泡确认框</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../popover/"
|
|
class="">
|
|
Popover
|
|
<span class="chinese">气泡卡片</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../progress/"
|
|
class="">
|
|
Progress
|
|
<span class="chinese">进度条</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../table/"
|
|
class="">
|
|
Table
|
|
<span class="chinese">表格</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../tag/"
|
|
class="">
|
|
Tag
|
|
<span class="chinese">标签</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../timeline/"
|
|
class="">
|
|
Timeline
|
|
<span class="chinese">时间轴</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../tooltip/"
|
|
class="">
|
|
Tooltip
|
|
<span class="chinese">文字提示</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../tree/"
|
|
class="">
|
|
Tree
|
|
<span class="chinese">树形控件</span>
|
|
</a>
|
|
</li>
|
|
<li class="type-divider">导航</li>
|
|
<li class="">
|
|
<a href="../breadcrumb/"
|
|
class="">
|
|
Breadcrumb
|
|
<span class="chinese">面包屑</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../menu/"
|
|
class="">
|
|
Menu
|
|
<span class="chinese">导航菜单</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../pagination/"
|
|
class="">
|
|
Pagination
|
|
<span class="chinese">分页</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../steps/"
|
|
class="">
|
|
Steps
|
|
<span class="chinese">步骤条</span>
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../tabs/"
|
|
class="">
|
|
Tabs
|
|
<span class="chinese">标签页</span>
|
|
</a>
|
|
</li>
|
|
<li class="type-divider">其他</li>
|
|
<li class="">
|
|
<a href="../affix/"
|
|
class="">
|
|
Affix
|
|
<span class="chinese">固钉</span>
|
|
</a>
|
|
</li>
|
|
<li class="current">
|
|
<a href="./"
|
|
class="">
|
|
QueueAnim
|
|
<span class="chinese">进出场动画</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<section class="main-container">
|
|
<article class="markdown">
|
|
<h1>
|
|
QueueAnim 进出场动画
|
|
</h1>
|
|
<p>通过简单的配置对一组元素添加串行的进场动画效果。</p>
|
|
<h2 id="何时使用">何时使用<a href="#何时使用" class="anchor">#</a> </h2><ul>
|
|
<li><p>从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。</p>
|
|
</li>
|
|
<li><p>小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，使页面转场更加流畅和舒适，提高整体视觉效果和产品的质感。</p>
|
|
</li>
|
|
<li><p>特别适合首页和需要视觉展示效果的宣传页，以及单页应用的切换页面动效。</p>
|
|
</li>
|
|
</ul>
|
|
<h2 id="api">API<a href="#api" class="anchor">#</a> </h2><p>元素依次进场。</p>
|
|
<div class="highlight"><pre><code class="xml"><span class="tag"><<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">key</span>=<span class="value">'demo1'</span>></span>依次进场<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">key</span>=<span class="value">'demo2'</span>></span>依次进场<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">key</span>=<span class="value">'demo3'</span>></span>依次进场<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">key</span>=<span class="value">'demo4'</span>></span>依次进场<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span></code></pre></div><blockquote>
|
|
<p>每个子标签必须带 key，如果未设置 key 将不执行动画。</p>
|
|
</blockquote>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>参数</th>
|
|
<th>类型</th>
|
|
<th>默认</th>
|
|
<th>详细</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>type</td>
|
|
<td>string / array</td>
|
|
<td><code>right</code></td>
|
|
<td>动画内置参数 <br/> <code>left</code> <code>right</code> <code>top</code> <code>bottom</code> <code>scale</code> <code>scaleBig</code> <code>scaleX</code> <code>scaleY</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>animConfig</td>
|
|
<td>object / array</td>
|
|
<td>null</td>
|
|
<td>配置动画参数 <br/> 如 <code>{opacity:[1, 0],translateY:[0, -30]}</code> 具体参考 <a href="http://julian.com/research/velocity">velocity</a> 的写法</td>
|
|
</tr>
|
|
<tr>
|
|
<td>delay</td>
|
|
<td>number / array</td>
|
|
<td>0</td>
|
|
<td>整个动画的延时,以毫秒为单位</td>
|
|
</tr>
|
|
<tr>
|
|
<td>duration</td>
|
|
<td>number / array</td>
|
|
<td>500</td>
|
|
<td>每个动画的时间,以毫秒为单位</td>
|
|
</tr>
|
|
<tr>
|
|
<td>interval</td>
|
|
<td>number / array</td>
|
|
<td>100</td>
|
|
<td>每个动画的间隔时间,以毫秒为单位</td>
|
|
</tr>
|
|
<tr>
|
|
<td>leaveReverse</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>出场时是否倒放,从最后一个 dom 开始往上播放</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ease</td>
|
|
<td>string / array</td>
|
|
<td><code>easeOutQuart</code></td>
|
|
<td>动画的缓动函数,<a href="http://julian.com/research/velocity/#easing">查看详细</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>animatingClassName</td>
|
|
<td>array</td>
|
|
<td><code>['queue-anim-entering', 'queue-anim-leaving']</code></td>
|
|
<td>进出场动画进行中的类名</td>
|
|
</tr>
|
|
<tr>
|
|
<td>component</td>
|
|
<td>string</td>
|
|
<td><code>div</code></td>
|
|
<td>QueueAnim 替换的标签名</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<blockquote>
|
|
<p>当以上数据类型为 Array 时，<code>['left', 'top']</code> 第一个为进场动画属性, 第二个为离场属性。</p>
|
|
</blockquote>
|
|
<style>
|
|
.code-box-demo .demo-header {
|
|
width: 100%;
|
|
background: #ebedee;
|
|
height: 30px;
|
|
}
|
|
.code-box-demo .demo-header ul {
|
|
float: right;
|
|
margin-right: 5px;
|
|
}
|
|
.code-box-demo .demo-header ul li {
|
|
width: 50px;
|
|
height: 30px;
|
|
float: left;
|
|
background: #e4e4e4;
|
|
margin-left: 5px;
|
|
}
|
|
.code-box-demo .demo-header ul li:before {
|
|
margin: 10px auto;
|
|
width: 20px;
|
|
height: 10px;
|
|
background: #ebeded;
|
|
}
|
|
.code-box-demo .demo-header .logo {
|
|
float: left;
|
|
margin: 0px auto 0 10px;
|
|
line-height: 32px;
|
|
}
|
|
.code-box-demo .demo-header .logo img{
|
|
margin:auto
|
|
}
|
|
.code-box-demo .demo-header .logo span {
|
|
display: block;
|
|
float: right;
|
|
}
|
|
.code-box-demo .demo-content {
|
|
width: 80%;
|
|
margin: 10px auto;
|
|
}
|
|
.code-box-demo .demo-content .demo-title {
|
|
text-align:left;
|
|
background: #a4a4a4;
|
|
width: 40%;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
color: #ebeded;
|
|
text-indent:10px
|
|
}
|
|
.code-box-demo .demo-content .demo-listBox {
|
|
margin-top: 10px;
|
|
}
|
|
.code-box-demo .demo-content .demo-listBox .demo-list .title {
|
|
height: 30px;
|
|
background: #cacaca;
|
|
overflow: hidden;
|
|
}
|
|
.code-box-demo .demo-content .demo-listBox .demo-list .title:before,.code-box-demo .demo-content .demo-listBox .demo-list .title:after{
|
|
width: 30%;
|
|
height: 5px;
|
|
background: #ebeded;
|
|
float:left;
|
|
margin:12px 35px 0;
|
|
}
|
|
.code-box-demo .demo-content .demo-listBox .demo-list .title:after{
|
|
width:15%;
|
|
float:right;
|
|
margin:12px 10px 0;
|
|
|
|
}
|
|
.code-box-demo .demo-content .demo-listBox .demo-list ul li {
|
|
height: 25px;
|
|
background: #ebeded;
|
|
border-bottom: 1px solid #cacaca;
|
|
overflow: hidden;
|
|
padding: 5px 15px;
|
|
}
|
|
.code-box-demo .demo-content .demo-listBox .demo-list ul li:before {
|
|
width: 10px;
|
|
height: 5px;
|
|
background: #cacaca;
|
|
float: left;
|
|
margin-top:4px
|
|
}
|
|
.code-box-demo .demo-content .demo-listBox .demo-list ul li:after {
|
|
width: 50%;
|
|
height: 5px;
|
|
background: #cacaca;
|
|
float: left;
|
|
margin-left: 10px;
|
|
margin-top: 4px;
|
|
}
|
|
.code-box-demo .demo-content .demo-kp {
|
|
margin: 10px auto;
|
|
}
|
|
.code-box-demo .demo-content .demo-kp ul li {
|
|
display: inline-block;
|
|
width: 32%;
|
|
height: 40px;
|
|
background: #cacaca;
|
|
color: #ebeded;
|
|
text-align: left;
|
|
padding: 10px;
|
|
margin-right: calc(2%);
|
|
}
|
|
.code-box-demo .demo-content .demo-kp ul li:last-child {
|
|
margin-right: 0%;
|
|
}
|
|
.code-box-demo .demo-content .demo-kp ul li:after {
|
|
width: 60%;
|
|
height: 5px;
|
|
background: #ebeded;
|
|
float: left;
|
|
margin-top: 7px;
|
|
}
|
|
.code-box-demo .demo-content .demo-kp ul li:before {
|
|
background: #ebeded;
|
|
float: left;
|
|
width: 15px;
|
|
height: 15px;
|
|
margin:2px 10% 0 0;
|
|
|
|
}
|
|
.code-box-demo .demo-footer {
|
|
margin-top: 10px;
|
|
background: #cacaca;
|
|
height: 40px;
|
|
float: left;
|
|
width: 100%;
|
|
display: table;
|
|
}
|
|
.code-box-demo .demo-footer:before {
|
|
width: 60%;
|
|
height: 5px;
|
|
background: #ededed;
|
|
margin: 10px auto 0;
|
|
}
|
|
.code-box-demo .demo-footer:after {
|
|
width: 30%;
|
|
height: 5px;
|
|
background: #ededed;
|
|
margin: 5px auto;
|
|
}
|
|
.code-box-demo .demo-header ul li:before,
|
|
.code-box-demo .demo-content .demo-kp ul li:before,
|
|
.code-box-demo .demo-content .demo-kp ul li:after,
|
|
.code-box-demo .demo-content .demo-listBox .demo-list .title:before,
|
|
.code-box-demo .demo-content .demo-listBox .demo-list .title:after,
|
|
.code-box-demo .demo-content .demo-listBox .demo-list ul li:before,
|
|
.code-box-demo .demo-content .demo-listBox .demo-list ul li:after,
|
|
.code-box-demo .demo-footer:before,
|
|
.code-box-demo .demo-footer:after {
|
|
display: block;
|
|
content: "";
|
|
}
|
|
</style>
|
|
|
|
</article>
|
|
<h2 class="component-demos">
|
|
组件演示
|
|
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
|
</h2>
|
|
<div class="code-boxes">
|
|
<div class="code-boxes-col-2-1"><div class="code-box" id="anim-demo-simple">
|
|
<div class="code-box-demo">
|
|
<div id="components-queue-anim-demo-simple"></div>
|
|
<script>(function(){"use strict";
|
|
|
|
var QueueAnim = antd.QueueAnim;
|
|
|
|
ReactDOM.render(React.createElement(
|
|
QueueAnim,
|
|
{ delay: 500 },
|
|
React.createElement(
|
|
"div",
|
|
{ key: "a" },
|
|
"依次进场"
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ key: "b" },
|
|
"依次进场"
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ key: "c" },
|
|
"依次进场"
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ key: "d" },
|
|
"依次进场"
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ key: "e" },
|
|
"依次进场"
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ key: "f" },
|
|
"依次进场"
|
|
)
|
|
), document.getElementById('components-queue-anim-demo-simple'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> QueueAnim = antd.QueueAnim;
|
|
|
|
ReactDOM.render(
|
|
<span class="xml"><span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">delay</span>=<span class="value">{500}</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">key</span>=<span class="value">"a"</span>></span>依次进场<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">key</span>=<span class="value">"b"</span>></span>依次进场<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">key</span>=<span class="value">"c"</span>></span>依次进场<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">key</span>=<span class="value">"d"</span>></span>依次进场<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">key</span>=<span class="value">"e"</span>></span>依次进场<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">key</span>=<span class="value">"f"</span>></span>依次进场<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
, document.getElementById('components-queue-anim-demo-simple'));</span></code></pre></div><style type="text/css">.code-box-demo > div {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.code-box-demo .buttons {
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
margin-bottom: 20px;
|
|
}</style><div class="highlight"><pre><code class="css"><span class="class">.code-box-demo</span> > <span class="tag">div</span> <span class="rules">{
|
|
<span class="rule"><span class="attribute">overflow</span>:<span class="value"> hidden</span></span>;
|
|
<span class="rule">}</span></span>
|
|
|
|
<span class="class">.code-box-demo</span> <span class="class">.buttons</span> <span class="rules">{
|
|
<span class="rule"><span class="attribute">text-align</span>:<span class="value"> center</span></span>;
|
|
<span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">0</span> auto</span></span>;
|
|
<span class="rule"><span class="attribute">margin-bottom</span>:<span class="value"> <span class="number">20</span>px</span></span>;
|
|
<span class="rule">}</span></span></code></pre></div>
|
|
</div>
|
|
<div class="code-box-meta markdown">
|
|
<div class="code-box-title">
|
|
<a href="#anim-demo-simple">默认</a>
|
|
</div>
|
|
<p>最简单的进场例子。</p>
|
|
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
|
</div>
|
|
</div><div class="code-box" id="anim-demo-enter-leave">
|
|
<div class="code-box-demo">
|
|
<div id="components-queue-anim-demo-enter-leave"></div>
|
|
<script>(function(){"use strict";
|
|
|
|
var QueueAnim = antd.QueueAnim;
|
|
var Button = antd.Button;
|
|
|
|
var Test = React.createClass({
|
|
displayName: "Test",
|
|
|
|
getInitialState: function getInitialState() {
|
|
return {
|
|
show: true
|
|
};
|
|
},
|
|
onClick: function onClick() {
|
|
this.setState({
|
|
show: !this.state.show
|
|
});
|
|
},
|
|
render: function render() {
|
|
return React.createElement(
|
|
"div",
|
|
null,
|
|
React.createElement(
|
|
"p",
|
|
{ className: "buttons" },
|
|
React.createElement(
|
|
Button,
|
|
{ type: "primary", onClick: this.onClick },
|
|
"切换"
|
|
)
|
|
),
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ className: "demo-content",
|
|
key: "demo",
|
|
type: ['right', 'left'],
|
|
ease: ['easeOutQuart', 'easeInOutQuart'] },
|
|
this.state.show ? [React.createElement(
|
|
"div",
|
|
{ className: "demo-kp", key: "a" },
|
|
React.createElement(
|
|
"ul",
|
|
null,
|
|
React.createElement("li", null),
|
|
React.createElement("li", null),
|
|
React.createElement("li", null)
|
|
)
|
|
), React.createElement(
|
|
"div",
|
|
{ className: "demo-listBox", key: "b" },
|
|
React.createElement(
|
|
"div",
|
|
{ className: "demo-list" },
|
|
React.createElement("div", { className: "title" }),
|
|
React.createElement(
|
|
"ul",
|
|
null,
|
|
React.createElement("li", null),
|
|
React.createElement("li", null),
|
|
React.createElement("li", null)
|
|
)
|
|
)
|
|
)] : null
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(React.createElement(Test, null), document.getElementById('components-queue-anim-demo-enter-leave'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> QueueAnim = antd.QueueAnim;
|
|
<span class="keyword">var</span> Button = antd.Button;
|
|
|
|
<span class="keyword">var</span> Test = React.createClass({
|
|
getInitialState() {
|
|
<span class="keyword">return</span> {
|
|
show: <span class="literal">true</span>
|
|
};
|
|
},
|
|
onClick() {
|
|
<span class="keyword">this</span>.setState({
|
|
show: !<span class="keyword">this</span>.state.show
|
|
});
|
|
},
|
|
render() {
|
|
<span class="keyword">return</span> (
|
|
<span class="xml"><span class="tag"><<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"buttons"</span>></span>
|
|
<span class="tag"><<span class="title">Button</span> <span class="attribute">type</span>=<span class="value">"primary"</span> <span class="attribute">onClick</span>=<span class="value">{this.onClick}</span>></span>切换<span class="tag"></<span class="title">Button</span>></span>
|
|
<span class="tag"></<span class="title">p</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">className</span>=<span class="value">"demo-content"</span>
|
|
<span class="attribute">key</span>=<span class="value">"demo"</span>
|
|
<span class="attribute">type</span>=<span class="value">{['right',</span> '<span class="attribute">left</span>']}
|
|
<span class="attribute">ease</span>=<span class="value">{['easeOutQuart',</span> '<span class="attribute">easeInOutQuart</span>']}></span>
|
|
{this.state.show ? [
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-kp"</span> <span class="attribute">key</span>=<span class="value">"a"</span>></span>
|
|
<span class="tag"><<span class="title">ul</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">ul</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>,
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-listBox"</span> <span class="attribute">key</span>=<span class="value">"b"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-list"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"title"</span>></span><span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">ul</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">ul</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
]: null}
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(<span class="tag"><<span class="title">Test</span> /></span>, document.getElementById('components-queue-anim-demo-enter-leave'));</span></code></pre></div>
|
|
</div>
|
|
<div class="code-box-meta markdown">
|
|
<div class="code-box-title">
|
|
<a href="#anim-demo-enter-leave">进场和离场</a>
|
|
</div>
|
|
<p>通过把属性设置一个数组来分别表示进出场的效果，<code>type</code>、<code>animConfig</code>、<code>delay</code>、<code>duration</code>、<code>interval</code>、<code>ease</code> 等属性均支持配置为数组。</p>
|
|
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
|
</div>
|
|
</div><div class="code-box" id="anim-demo-form">
|
|
<div class="code-box-demo">
|
|
<div id="components-queue-anim-demo-form"></div>
|
|
<script>(function(){"use strict";
|
|
|
|
var QueueAnim = antd.QueueAnim;
|
|
var Select = antd.Select;
|
|
var Option = Select.Option;
|
|
var Checkbox = antd.Checkbox;
|
|
var Radio = antd.Radio;
|
|
var RadioGroup = antd.Radio.Group;
|
|
var Button = antd.Button;
|
|
|
|
var Test = React.createClass({
|
|
displayName: "Test",
|
|
|
|
getInitialState: function getInitialState() {
|
|
return {
|
|
show: true
|
|
};
|
|
},
|
|
onClick: function onClick() {
|
|
this.setState({
|
|
show: !this.state.show
|
|
});
|
|
},
|
|
render: function render() {
|
|
return React.createElement(
|
|
"div",
|
|
null,
|
|
React.createElement(
|
|
"p",
|
|
{ className: "buttons" },
|
|
React.createElement(
|
|
Button,
|
|
{ type: "primary", onClick: this.onClick },
|
|
"切换"
|
|
)
|
|
),
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ component: "form", className: "ant-form-horizontal", type: "bottom", leaveReverse: true },
|
|
this.state.show ? [React.createElement(
|
|
"div",
|
|
{ className: "ant-form-item ant-form-item-compact", key: "name" },
|
|
React.createElement(
|
|
"label",
|
|
{ htmlFor: "userName", className: "col-6", required: true },
|
|
"用户名："
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ className: "col-6" },
|
|
React.createElement(
|
|
"p",
|
|
{ className: "ant-form-text" },
|
|
"大眼萌 minion"
|
|
)
|
|
)
|
|
), React.createElement(
|
|
"div",
|
|
{ className: "ant-form-item", key: "password" },
|
|
React.createElement(
|
|
"label",
|
|
{ htmlFor: "password", className: "col-6", required: true },
|
|
"密码："
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ className: "col-14" },
|
|
React.createElement("input", { className: "ant-input", type: "password", id: "password", placeholder: "请输入密码" })
|
|
)
|
|
), React.createElement(
|
|
"div",
|
|
{ className: "ant-form-item ant-form-item-compact", key: "sex" },
|
|
React.createElement(
|
|
"label",
|
|
{ className: "col-6", required: true },
|
|
"您的性别："
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ className: "col-14" },
|
|
React.createElement(
|
|
RadioGroup,
|
|
{ value: "male" },
|
|
React.createElement(
|
|
Radio,
|
|
{ value: "male" },
|
|
"男的"
|
|
),
|
|
React.createElement(
|
|
Radio,
|
|
{ value: "female" },
|
|
"女的"
|
|
)
|
|
)
|
|
)
|
|
), React.createElement(
|
|
"div",
|
|
{ className: "ant-form-item", key: "remark" },
|
|
React.createElement(
|
|
"label",
|
|
{ htmlFor: "remark", className: "col-6", required: true },
|
|
"备注："
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ className: "col-14" },
|
|
React.createElement("textarea", { className: "ant-input", id: "remark", placeholder: "随便写" }),
|
|
React.createElement(
|
|
"p",
|
|
{ className: "ant-form-explain" },
|
|
"随便写点什么"
|
|
)
|
|
)
|
|
), React.createElement(
|
|
"div",
|
|
{ className: "ant-form-item ant-form-item-compact", key: "checkbox" },
|
|
React.createElement(
|
|
"div",
|
|
{ className: "col-14 col-offset-6" },
|
|
React.createElement(
|
|
"label",
|
|
null,
|
|
React.createElement(Checkbox, null),
|
|
"同意"
|
|
)
|
|
)
|
|
), React.createElement(
|
|
"div",
|
|
{ className: "row", key: "btn" },
|
|
React.createElement(
|
|
"div",
|
|
{ className: "col-16 col-offset-6" },
|
|
React.createElement(
|
|
Button,
|
|
{ type: "primary" },
|
|
"确定"
|
|
)
|
|
)
|
|
)] : null
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(React.createElement(Test, null), document.getElementById('components-queue-anim-demo-form'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> QueueAnim = antd.QueueAnim;
|
|
<span class="keyword">var</span> Select = antd.Select;
|
|
<span class="keyword">var</span> Option = Select.Option;
|
|
<span class="keyword">var</span> Checkbox = antd.Checkbox;
|
|
<span class="keyword">var</span> Radio = antd.Radio;
|
|
<span class="keyword">var</span> RadioGroup = antd.Radio.Group;
|
|
<span class="keyword">var</span> Button = antd.Button;
|
|
|
|
<span class="keyword">var</span> Test = React.createClass({
|
|
getInitialState() {
|
|
<span class="keyword">return</span> {
|
|
show: <span class="literal">true</span>
|
|
};
|
|
},
|
|
onClick() {
|
|
<span class="keyword">this</span>.setState({
|
|
show: !<span class="keyword">this</span>.state.show
|
|
});
|
|
},
|
|
render() {
|
|
<span class="keyword">return</span> (
|
|
<span class="xml"><span class="tag"><<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"buttons"</span>></span>
|
|
<span class="tag"><<span class="title">Button</span> <span class="attribute">type</span>=<span class="value">"primary"</span> <span class="attribute">onClick</span>=<span class="value">{this.onClick}</span>></span>切换<span class="tag"></<span class="title">Button</span>></span>
|
|
<span class="tag"></<span class="title">p</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">component</span>=<span class="value">"form"</span> <span class="attribute">className</span>=<span class="value">"ant-form-horizontal"</span> <span class="attribute">type</span>=<span class="value">"bottom"</span> <span class="attribute">leaveReverse</span>=<span class="value">{true}</span>></span>
|
|
{this.state.show ? [
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item ant-form-item-compact"</span> <span class="attribute">key</span>=<span class="value">'name'</span>></span>
|
|
<span class="tag"><<span class="title">label</span> <span class="attribute">htmlFor</span>=<span class="value">"userName"</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>></span>用户名：<span class="tag"></<span class="title">label</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-6"</span>></span>
|
|
<span class="tag"><<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"ant-form-text"</span>></span>大眼萌 minion<span class="tag"></<span class="title">p</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>,
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span> <span class="attribute">key</span>=<span class="value">'password'</span>></span>
|
|
<span class="tag"><<span class="title">label</span> <span class="attribute">htmlFor</span>=<span class="value">"password"</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>></span>密码：<span class="tag"></<span class="title">label</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-14"</span>></span>
|
|
<span class="tag"><<span class="title">input</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">type</span>=<span class="value">"password"</span> <span class="attribute">id</span>=<span class="value">"password"</span> <span class="attribute">placeholder</span>=<span class="value">"请输入密码"</span>/></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>,
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item ant-form-item-compact"</span> <span class="attribute">key</span>=<span class="value">'sex'</span>></span>
|
|
<span class="tag"><<span class="title">label</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>></span>您的性别：<span class="tag"></<span class="title">label</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-14"</span>></span>
|
|
<span class="tag"><<span class="title">RadioGroup</span> <span class="attribute">value</span>=<span class="value">"male"</span>></span>
|
|
<span class="tag"><<span class="title">Radio</span> <span class="attribute">value</span>=<span class="value">"male"</span>></span>男的<span class="tag"></<span class="title">Radio</span>></span>
|
|
<span class="tag"><<span class="title">Radio</span> <span class="attribute">value</span>=<span class="value">"female"</span>></span>女的<span class="tag"></<span class="title">Radio</span>></span>
|
|
<span class="tag"></<span class="title">RadioGroup</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>,
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item"</span> <span class="attribute">key</span>=<span class="value">'remark'</span>></span>
|
|
<span class="tag"><<span class="title">label</span> <span class="attribute">htmlFor</span>=<span class="value">"remark"</span> <span class="attribute">className</span>=<span class="value">"col-6"</span> <span class="attribute">required</span>></span>备注：<span class="tag"></<span class="title">label</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-14"</span>></span>
|
|
<span class="tag"><<span class="title">textarea</span> <span class="attribute">className</span>=<span class="value">"ant-input"</span> <span class="attribute">id</span>=<span class="value">"remark"</span> <span class="attribute">placeholder</span>=<span class="value">"随便写"</span>></span><span class="tag"></<span class="title">textarea</span>></span>
|
|
<span class="tag"><<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"ant-form-explain"</span>></span>随便写点什么<span class="tag"></<span class="title">p</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>,
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"ant-form-item ant-form-item-compact"</span> <span class="attribute">key</span>=<span class="value">'checkbox'</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-14 col-offset-6"</span>></span>
|
|
<span class="tag"><<span class="title">label</span>></span>
|
|
<span class="tag"><<span class="title">Checkbox</span> /></span>
|
|
同意
|
|
<span class="tag"></<span class="title">label</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>,
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"row"</span> <span class="attribute">key</span>=<span class="value">'btn'</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"col-16 col-offset-6"</span>></span>
|
|
<span class="tag"><<span class="title">Button</span> <span class="attribute">type</span>=<span class="value">"primary"</span>></span>确定<span class="tag"></<span class="title">Button</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
] : null}
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(<span class="tag"><<span class="title">Test</span> /></span>, document.getElementById('components-queue-anim-demo-form'));</span></code></pre></div>
|
|
</div>
|
|
<div class="code-box-meta markdown">
|
|
<div class="code-box-title">
|
|
<a href="#anim-demo-form">表单动画进出场</a>
|
|
</div>
|
|
<p>表单组合的进场与出场动画。</p>
|
|
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
|
</div>
|
|
</div><div class="code-box" id="anim-demo-page">
|
|
<div class="code-box-demo">
|
|
<div id="components-queue-anim-demo-page"></div>
|
|
<script>(function(){"use strict";
|
|
|
|
var QueueAnim = antd.QueueAnim;
|
|
var Button = antd.Button;
|
|
|
|
var Test = React.createClass({
|
|
displayName: "Test",
|
|
|
|
getInitialState: function getInitialState() {
|
|
return {
|
|
show: true
|
|
};
|
|
},
|
|
onClick: function onClick() {
|
|
this.setState({
|
|
show: !this.state.show
|
|
});
|
|
},
|
|
render: function render() {
|
|
return React.createElement(
|
|
"div",
|
|
null,
|
|
React.createElement(
|
|
"p",
|
|
{ className: "buttons" },
|
|
React.createElement(
|
|
Button,
|
|
{ type: "primary", onClick: this.onClick },
|
|
"切换"
|
|
)
|
|
),
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ type: ['right', 'left'] },
|
|
this.state.show ? [React.createElement(
|
|
"div",
|
|
{ className: "demo-header", key: "header" },
|
|
React.createElement(
|
|
"div",
|
|
{ className: "logo" },
|
|
React.createElement("img", { width: "30", src: "https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" }),
|
|
React.createElement(
|
|
"span",
|
|
null,
|
|
"logo"
|
|
)
|
|
),
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ component: "ul" },
|
|
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(
|
|
QueueAnim,
|
|
{ className: "demo-content", key: "content", delay: 300 },
|
|
React.createElement(
|
|
"div",
|
|
{ className: "demo-title", key: "title" },
|
|
"我是标题"
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ className: "demo-kp", key: "b" },
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ component: "ul" },
|
|
React.createElement("li", { key: "0" }),
|
|
React.createElement("li", { key: "1" }),
|
|
React.createElement("li", { key: "2" })
|
|
)
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ className: "demo-title", key: "title2" },
|
|
"我是标题"
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ className: "demo-listBox" },
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ className: "demo-list", delay: 500 },
|
|
React.createElement("div", { className: "title", key: "title3" }),
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ component: "ul", type: "bottom", 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(
|
|
QueueAnim,
|
|
{ delay: 1000, type: "bottom", key: "footerBox" },
|
|
React.createElement("div", { className: "demo-footer", key: "footer" })
|
|
)] : null
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(React.createElement(Test, null), document.getElementById('components-queue-anim-demo-page'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> QueueAnim = antd.QueueAnim;
|
|
<span class="keyword">var</span> Button = antd.Button;
|
|
|
|
<span class="keyword">var</span> Test = React.createClass({
|
|
getInitialState() {
|
|
<span class="keyword">return</span> {
|
|
show: <span class="literal">true</span>
|
|
};
|
|
},
|
|
onClick() {
|
|
<span class="keyword">this</span>.setState({
|
|
show: !<span class="keyword">this</span>.state.show
|
|
});
|
|
},
|
|
render() {
|
|
<span class="keyword">return</span> (
|
|
<span class="xml"><span class="tag"><<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"buttons"</span>></span>
|
|
<span class="tag"><<span class="title">Button</span> <span class="attribute">type</span>=<span class="value">"primary"</span> <span class="attribute">onClick</span>=<span class="value">{this.onClick}</span>></span>切换<span class="tag"></<span class="title">Button</span>></span>
|
|
<span class="tag"></<span class="title">p</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">type</span>=<span class="value">{['right',</span> '<span class="attribute">left</span>']}></span>
|
|
{this.state.show ? [
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-header"</span> <span class="attribute">key</span>=<span class="value">"header"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"logo"</span>></span>
|
|
<span class="tag"><<span class="title">img</span> <span class="attribute">width</span>=<span class="value">"30"</span> <span class="attribute">src</span>=<span class="value">"https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg"</span> /></span>
|
|
<span class="tag"><<span class="title">span</span>></span>logo<span class="tag"></<span class="title">span</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">component</span>=<span class="value">"ul"</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"0"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"1"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"2"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"3"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"4"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>,
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">className</span>=<span class="value">"demo-content"</span> <span class="attribute">key</span>=<span class="value">"content"</span> <span class="attribute">delay</span>=<span class="value">{300}</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-title"</span> <span class="attribute">key</span>=<span class="value">"title"</span>></span>我是标题<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-kp"</span> <span class="attribute">key</span>=<span class="value">"b"</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">component</span>=<span class="value">"ul"</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"0"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"1"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"2"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-title"</span> <span class="attribute">key</span>=<span class="value">"title2"</span>></span>我是标题<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-listBox"</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">className</span>=<span class="value">"demo-list"</span> <span class="attribute">delay</span>=<span class="value">{500}</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"title"</span> <span class="attribute">key</span>=<span class="value">"title3"</span>></span><span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">component</span>=<span class="value">"ul"</span> <span class="attribute">type</span>=<span class="value">"bottom"</span> <span class="attribute">key</span>=<span class="value">"li"</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"0"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"1"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"2"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"3"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"4"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>,
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">delay</span>=<span class="value">{1000}</span> <span class="attribute">type</span>=<span class="value">"bottom"</span> <span class="attribute">key</span>=<span class="value">"footerBox"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-footer"</span> <span class="attribute">key</span>=<span class="value">"footer"</span>></span><span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
] : null}
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(<span class="tag"><<span class="title">Test</span> /></span>, document.getElementById('components-queue-anim-demo-page'));</span></code></pre></div>
|
|
</div>
|
|
<div class="code-box-meta markdown">
|
|
<div class="code-box-title">
|
|
<a href="#anim-demo-page">一个复杂些的例子</a>
|
|
</div>
|
|
<p>模拟一个完整的页面。</p>
|
|
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="code-boxes-col-2-1"><div class="code-box" id="anim-demo-basic">
|
|
<div class="code-box-demo">
|
|
<div id="components-queue-anim-demo-basic"></div>
|
|
<script>(function(){"use strict";
|
|
|
|
var QueueAnim = antd.QueueAnim;
|
|
var Button = antd.Button;
|
|
|
|
var Test = React.createClass({
|
|
displayName: "Test",
|
|
|
|
getInitialState: function getInitialState() {
|
|
return {
|
|
show: true
|
|
};
|
|
},
|
|
onClick: function onClick() {
|
|
this.setState({
|
|
show: !this.state.show
|
|
});
|
|
},
|
|
render: function render() {
|
|
return React.createElement(
|
|
"div",
|
|
null,
|
|
React.createElement(
|
|
"p",
|
|
{ className: "buttons" },
|
|
React.createElement(
|
|
Button,
|
|
{ type: "primary", onClick: this.onClick },
|
|
"切换"
|
|
)
|
|
),
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ className: "demo-content" },
|
|
this.state.show ? [React.createElement(
|
|
"div",
|
|
{ className: "demo-kp", key: "a" },
|
|
React.createElement(
|
|
"ul",
|
|
null,
|
|
React.createElement("li", null),
|
|
React.createElement("li", null),
|
|
React.createElement("li", null)
|
|
)
|
|
), React.createElement(
|
|
"div",
|
|
{ className: "demo-listBox", key: "b" },
|
|
React.createElement(
|
|
"div",
|
|
{ className: "demo-list" },
|
|
React.createElement("div", { className: "title" }),
|
|
React.createElement(
|
|
"ul",
|
|
null,
|
|
React.createElement("li", null),
|
|
React.createElement("li", null),
|
|
React.createElement("li", null)
|
|
)
|
|
)
|
|
)] : null
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(React.createElement(Test, null), document.getElementById('components-queue-anim-demo-basic'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> QueueAnim = antd.QueueAnim;
|
|
<span class="keyword">var</span> Button = antd.Button;
|
|
|
|
<span class="keyword">var</span> Test = React.createClass({
|
|
getInitialState() {
|
|
<span class="keyword">return</span> {
|
|
show: <span class="literal">true</span>
|
|
};
|
|
},
|
|
onClick() {
|
|
<span class="keyword">this</span>.setState({
|
|
show: !<span class="keyword">this</span>.state.show
|
|
});
|
|
},
|
|
render() {
|
|
<span class="keyword">return</span> (
|
|
<span class="xml"><span class="tag"><<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"buttons"</span>></span>
|
|
<span class="tag"><<span class="title">Button</span> <span class="attribute">type</span>=<span class="value">"primary"</span> <span class="attribute">onClick</span>=<span class="value">{this.onClick}</span>></span>切换<span class="tag"></<span class="title">Button</span>></span>
|
|
<span class="tag"></<span class="title">p</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">className</span>=<span class="value">"demo-content"</span>></span>
|
|
{this.state.show ? [
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-kp"</span> <span class="attribute">key</span>=<span class="value">"a"</span>></span>
|
|
<span class="tag"><<span class="title">ul</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">ul</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>,
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-listBox"</span> <span class="attribute">key</span>=<span class="value">"b"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-list"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"title"</span>></span><span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">ul</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">ul</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
] : null}
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(<span class="tag"><<span class="title">Test</span> /></span>, document.getElementById('components-queue-anim-demo-basic'));</span></code></pre></div>
|
|
</div>
|
|
<div class="code-box-meta markdown">
|
|
<div class="code-box-title">
|
|
<a href="#anim-demo-basic">进场和离场</a>
|
|
</div>
|
|
<p>同时支持进场和离场动画。</p>
|
|
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
|
</div>
|
|
</div><div class="code-box" id="anim-demo-custom">
|
|
<div class="code-box-demo">
|
|
<div id="components-queue-anim-demo-custom"></div>
|
|
<script>(function(){"use strict";
|
|
|
|
var QueueAnim = antd.QueueAnim;
|
|
var Button = antd.Button;
|
|
var Test = React.createClass({
|
|
displayName: "Test",
|
|
|
|
getInitialState: function getInitialState() {
|
|
return {
|
|
show: true
|
|
};
|
|
},
|
|
onClick: function onClick() {
|
|
this.setState({
|
|
show: !this.state.show
|
|
});
|
|
},
|
|
render: function render() {
|
|
return React.createElement(
|
|
"div",
|
|
null,
|
|
React.createElement(
|
|
"p",
|
|
{ className: "buttons" },
|
|
React.createElement(
|
|
Button,
|
|
{ type: "primary", onClick: this.onClick },
|
|
"切换"
|
|
)
|
|
),
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ className: "demo-content",
|
|
animConfig: [{ opacity: [1, 0], translateY: [0, 50] }, { opacity: [1, 0], translateY: [0, -50] }] },
|
|
this.state.show ? [React.createElement(
|
|
"div",
|
|
{ className: "demo-kp", key: "a" },
|
|
React.createElement(
|
|
"ul",
|
|
null,
|
|
React.createElement("li", null),
|
|
React.createElement("li", null),
|
|
React.createElement("li", null)
|
|
)
|
|
), React.createElement(
|
|
"div",
|
|
{ className: "demo-listBox", key: "b" },
|
|
React.createElement(
|
|
"div",
|
|
{ className: "demo-list" },
|
|
React.createElement("div", { className: "title" }),
|
|
React.createElement(
|
|
"ul",
|
|
null,
|
|
React.createElement("li", null),
|
|
React.createElement("li", null),
|
|
React.createElement("li", null)
|
|
)
|
|
)
|
|
)] : null
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(React.createElement(Test, null), document.getElementById('components-queue-anim-demo-custom'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> QueueAnim = antd.QueueAnim;
|
|
<span class="keyword">var</span> Button = antd.Button;
|
|
<span class="keyword">var</span> Test = React.createClass({
|
|
getInitialState() {
|
|
<span class="keyword">return</span> {
|
|
show: <span class="literal">true</span>,
|
|
}
|
|
},
|
|
onClick() {
|
|
<span class="keyword">this</span>.setState({
|
|
show: !<span class="keyword">this</span>.state.show,
|
|
})
|
|
},
|
|
render() {
|
|
<span class="keyword">return</span> (
|
|
<span class="xml"><span class="tag"><<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"buttons"</span>></span>
|
|
<span class="tag"><<span class="title">Button</span> <span class="attribute">type</span>=<span class="value">"primary"</span> <span class="attribute">onClick</span>=<span class="value">{this.onClick}</span>></span>切换<span class="tag"></<span class="title">Button</span>></span>
|
|
<span class="tag"></<span class="title">p</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">className</span>=<span class="value">"demo-content"</span>
|
|
<span class="attribute">animConfig</span>=<span class="value">{[</span>
|
|
{ <span class="attribute">opacity:</span> [<span class="attribute">1</span>, <span class="attribute">0</span>], <span class="attribute">translateY:</span> [<span class="attribute">0</span>, <span class="attribute">50</span>] },
|
|
{ <span class="attribute">opacity:</span> [<span class="attribute">1</span>, <span class="attribute">0</span>], <span class="attribute">translateY:</span> [<span class="attribute">0</span>, <span class="attribute">-50</span>] }
|
|
]}></span>
|
|
{this.state.show ? [
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-kp"</span> <span class="attribute">key</span>=<span class="value">"a"</span>></span>
|
|
<span class="tag"><<span class="title">ul</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">ul</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>,
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-listBox"</span> <span class="attribute">key</span>=<span class="value">"b"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-list"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"title"</span>></span><span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">ul</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">ul</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
] : null}
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
)
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(<span class="tag"><<span class="title">Test</span> /></span>, document.getElementById('components-queue-anim-demo-custom'));</span></code></pre></div>
|
|
</div>
|
|
<div class="code-box-meta markdown">
|
|
<div class="code-box-title">
|
|
<a href="#anim-demo-custom">自定义动画进出场</a>
|
|
</div>
|
|
<p>通过 <code>animConfig</code> 来自定义动画进出场。</p>
|
|
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
|
</div>
|
|
</div><div class="code-box" id="anim-demo-change">
|
|
<div class="code-box-demo">
|
|
<div id="components-queue-anim-demo-change"></div>
|
|
<script>(function(){"use strict";
|
|
|
|
var QueueAnim = antd.QueueAnim;
|
|
var Button = antd.Button;
|
|
|
|
var Test = React.createClass({
|
|
displayName: "Test",
|
|
|
|
getInitialState: function getInitialState() {
|
|
return {
|
|
show: true,
|
|
items: [React.createElement("li", { key: "0" }), React.createElement("li", { key: "1" }), React.createElement("li", { key: "2" })]
|
|
};
|
|
},
|
|
onClick: function onClick() {
|
|
this.setState({
|
|
show: !this.state.show
|
|
});
|
|
},
|
|
onAdd: function onAdd() {
|
|
var items = this.state.items;
|
|
items.push(React.createElement("li", { key: Date.now() }));
|
|
this.setState({
|
|
show: true,
|
|
items: items
|
|
});
|
|
},
|
|
onRemove: function onRemove() {
|
|
var items = this.state.items;
|
|
items.splice(items.length - 1, 1);
|
|
this.setState({
|
|
show: true,
|
|
items: items
|
|
});
|
|
},
|
|
render: function render() {
|
|
return React.createElement(
|
|
"div",
|
|
null,
|
|
React.createElement(
|
|
"p",
|
|
{ className: "buttons" },
|
|
React.createElement(
|
|
Button,
|
|
{ type: "primary", onClick: this.onClick },
|
|
"切换"
|
|
),
|
|
React.createElement(
|
|
Button,
|
|
{ onClick: this.onAdd, style: { marginLeft: 10 } },
|
|
"添加"
|
|
),
|
|
React.createElement(
|
|
Button,
|
|
{ onClick: this.onRemove, style: { marginLeft: 10 } },
|
|
"删除"
|
|
)
|
|
),
|
|
React.createElement(
|
|
"div",
|
|
{ className: "demo-content" },
|
|
React.createElement(
|
|
"div",
|
|
{ className: "demo-listBox", key: "b" },
|
|
React.createElement(
|
|
"div",
|
|
{ className: "demo-list" },
|
|
React.createElement("div", { className: "title" }),
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ component: "ul", type: ['right', 'left'] },
|
|
this.state.show ? this.state.items : null
|
|
)
|
|
)
|
|
)
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(React.createElement(Test, null), document.getElementById('components-queue-anim-demo-change'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> QueueAnim = antd.QueueAnim;
|
|
<span class="keyword">var</span> Button = antd.Button;
|
|
|
|
<span class="keyword">var</span> Test = React.createClass({
|
|
getInitialState() {
|
|
<span class="keyword">return</span> {
|
|
show: <span class="literal">true</span>,
|
|
items: [
|
|
<span class="xml"><span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"0"</span>></span><span class="tag"></<span class="title">li</span>></span>,
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"1"</span>></span><span class="tag"></<span class="title">li</span>></span>,
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"2"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
],
|
|
};
|
|
},
|
|
onClick() {
|
|
this.setState({
|
|
show: !this.state.show,
|
|
});
|
|
},
|
|
onAdd() {
|
|
var items = this.state.items;
|
|
items.push(<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">{Date.now()}</span>></span><span class="tag"></<span class="title">li</span>></span>);
|
|
this.setState({
|
|
show: true,
|
|
items: items,
|
|
});
|
|
},
|
|
onRemove() {
|
|
var items = this.state.items;
|
|
items.splice(items.length - 1, 1);
|
|
this.setState({
|
|
show: true,
|
|
items: items,
|
|
});
|
|
},
|
|
render() {
|
|
return (
|
|
<span class="tag"><<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">p</span> <span class="attribute">className</span>=<span class="value">"buttons"</span>></span>
|
|
<span class="tag"><<span class="title">Button</span> <span class="attribute">type</span>=<span class="value">"primary"</span> <span class="attribute">onClick</span>=<span class="value">{this.onClick}</span>></span>切换<span class="tag"></<span class="title">Button</span>></span>
|
|
<span class="tag"><<span class="title">Button</span> <span class="attribute">onClick</span>=<span class="value">{this.onAdd}</span> <span class="attribute">style</span>=<span class="value">{{marginLeft:10}}</span>></span>添加<span class="tag"></<span class="title">Button</span>></span>
|
|
<span class="tag"><<span class="title">Button</span> <span class="attribute">onClick</span>=<span class="value">{this.onRemove}</span> <span class="attribute">style</span>=<span class="value">{{marginLeft:10}}</span>></span>删除<span class="tag"></<span class="title">Button</span>></span>
|
|
<span class="tag"></<span class="title">p</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-content"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-listBox"</span> <span class="attribute">key</span>=<span class="value">"b"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-list"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"title"</span>></span><span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">component</span>=<span class="value">"ul"</span> <span class="attribute">type</span>=<span class="value">{['right',</span> '<span class="attribute">left</span>']}></span>
|
|
{this.state.show ? this.state.items: null}
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(<span class="tag"><<span class="title">Test</span> /></span>, document.getElementById('components-queue-anim-demo-change'));</span></code></pre></div>
|
|
</div>
|
|
<div class="code-box-meta markdown">
|
|
<div class="code-box-title">
|
|
<a href="#anim-demo-change">添加与删除</a>
|
|
</div>
|
|
<p>场景里有增加或删除条目时也会触发动画。</p>
|
|
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
|
</div>
|
|
</div><div class="code-box" id="anim-demo-router">
|
|
<div class="code-box-demo">
|
|
<div id="components-queue-anim-demo-router"></div>
|
|
<script>(function(){'use strict';
|
|
|
|
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({
|
|
displayName: 'App',
|
|
|
|
render: function render() {
|
|
var key = this.props.location.pathname;
|
|
var keys = key.replace('/', '') ? [key.replace('/', '')] : ['home'];
|
|
return React.createElement(
|
|
'div',
|
|
null,
|
|
React.createElement(
|
|
Menu,
|
|
{ style: { marginBottom: 10 }, mode: 'horizontal', selectedKeys: keys },
|
|
React.createElement(
|
|
Menu.Item,
|
|
{ key: 'home' },
|
|
React.createElement(
|
|
Link,
|
|
{ to: '/' },
|
|
'首页'
|
|
)
|
|
),
|
|
React.createElement(
|
|
Menu.Item,
|
|
{ key: 'page1' },
|
|
React.createElement(
|
|
Link,
|
|
{ to: '/page1' },
|
|
'Page 1'
|
|
)
|
|
),
|
|
React.createElement(
|
|
Menu.Item,
|
|
{ key: 'page2' },
|
|
React.createElement(
|
|
Link,
|
|
{ to: '/page2' },
|
|
'Page 2'
|
|
)
|
|
)
|
|
),
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ type: ['right', 'left'], className: 'demo-router-wrap' },
|
|
React.cloneElement(this.props.children || React.createElement(Home, null), { key: key })
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
var Home = React.createClass({
|
|
displayName: 'Home',
|
|
|
|
render: function render() {
|
|
return React.createElement(
|
|
'div',
|
|
{ className: 'demo-router-child' },
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ className: 'demo-content' },
|
|
React.createElement(
|
|
'div',
|
|
{ className: 'demo-kp', key: 'a' },
|
|
React.createElement(
|
|
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(
|
|
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(
|
|
QueueAnim,
|
|
{ component: 'ul' },
|
|
React.createElement('li', { key: '0' }),
|
|
React.createElement('li', { key: '1' }),
|
|
React.createElement('li', { key: '2' })
|
|
)
|
|
)
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
var Page1 = React.createClass({
|
|
displayName: 'Page1',
|
|
|
|
render: function render() {
|
|
return React.createElement(
|
|
'div',
|
|
{ className: 'demo-router-child' },
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ className: 'demo-content' },
|
|
React.createElement(
|
|
'div',
|
|
{ className: 'demo-kp', key: 'b' },
|
|
React.createElement(
|
|
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(
|
|
QueueAnim,
|
|
{ className: 'demo-list', delay: 200 },
|
|
React.createElement('div', { className: 'title', key: 'title3' }),
|
|
React.createElement(
|
|
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' })
|
|
)
|
|
)
|
|
)
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
var Page2 = React.createClass({
|
|
displayName: 'Page2',
|
|
|
|
render: function render() {
|
|
return React.createElement(
|
|
'div',
|
|
{ className: 'demo-router-child' },
|
|
React.createElement(
|
|
'div',
|
|
{ className: 'demo-content' },
|
|
React.createElement(
|
|
'div',
|
|
{ className: 'demo-listBox' },
|
|
React.createElement(
|
|
QueueAnim,
|
|
{ className: 'demo-list' },
|
|
React.createElement('div', { className: 'title', key: 'title3' }),
|
|
React.createElement(
|
|
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,
|
|
null,
|
|
React.createElement(
|
|
Route,
|
|
{ path: '/', component: App, ignoreScrollBehavior: true },
|
|
React.createElement(Route, { path: 'page1', component: Page1 }),
|
|
React.createElement(Route, { path: 'page2', component: Page2 })
|
|
)
|
|
), document.getElementById('components-queue-anim-demo-router'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> ReactRouter = require(<span class="string">'react-router'</span>);
|
|
<span class="keyword">var</span> Router = ReactRouter.Router;
|
|
<span class="keyword">var</span> Route = ReactRouter.Route;
|
|
<span class="keyword">var</span> Link = ReactRouter.Link;
|
|
<span class="keyword">var</span> QueueAnim = antd.QueueAnim;
|
|
<span class="keyword">var</span> Menu = antd.Menu;
|
|
|
|
<span class="keyword">var</span> App = React.createClass({
|
|
render() {
|
|
<span class="keyword">var</span> key = <span class="keyword">this</span>.props.location.pathname;
|
|
<span class="keyword">var</span> keys = key.replace(<span class="string">'/'</span>, <span class="string">''</span>) ? [ key.replace(<span class="string">'/'</span>, <span class="string">''</span>) ] : [ <span class="string">'home'</span> ];
|
|
<span class="keyword">return</span> (
|
|
<span class="xml"><span class="tag"><<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">Menu</span> <span class="attribute">style</span>=<span class="value">{{marginBottom:</span> <span class="attribute">10</span>}} <span class="attribute">mode</span>=<span class="value">"horizontal"</span> <span class="attribute">selectedKeys</span>=<span class="value">{keys}</span>></span>
|
|
<span class="tag"><<span class="title">Menu.Item</span> <span class="attribute">key</span>=<span class="value">"home"</span>></span>
|
|
<span class="tag"><<span class="title">Link</span> <span class="attribute">to</span>=<span class="value">"/"</span>></span>首页<span class="tag"></<span class="title">Link</span>></span>
|
|
<span class="tag"></<span class="title">Menu.Item</span>></span>
|
|
<span class="tag"><<span class="title">Menu.Item</span> <span class="attribute">key</span>=<span class="value">"page1"</span>></span>
|
|
<span class="tag"><<span class="title">Link</span> <span class="attribute">to</span>=<span class="value">"/page1"</span>></span>Page 1<span class="tag"></<span class="title">Link</span>></span>
|
|
<span class="tag"></<span class="title">Menu.Item</span>></span>
|
|
<span class="tag"><<span class="title">Menu.Item</span> <span class="attribute">key</span>=<span class="value">"page2"</span>></span>
|
|
<span class="tag"><<span class="title">Link</span> <span class="attribute">to</span>=<span class="value">"/page2"</span>></span>Page 2<span class="tag"></<span class="title">Link</span>></span>
|
|
<span class="tag"></<span class="title">Menu.Item</span>></span>
|
|
<span class="tag"></<span class="title">Menu</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">type</span>=<span class="value">{['right',</span> '<span class="attribute">left</span>']} <span class="attribute">className</span>=<span class="value">"demo-router-wrap"</span>></span>
|
|
{React.cloneElement(this.props.children||<span class="tag"><<span class="title">Home</span>/></span>, {key: key})}
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
);
|
|
}
|
|
});
|
|
|
|
var Home = React.createClass({
|
|
render() {
|
|
return (
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-router-child"</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">className</span>=<span class="value">"demo-content"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-kp"</span> <span class="attribute">key</span>=<span class="value">"a"</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">component</span>=<span class="value">"ul"</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"0"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"1"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"2"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-kp"</span> <span class="attribute">key</span>=<span class="value">"b"</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">component</span>=<span class="value">"ul"</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"0"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"1"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"2"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-kp"</span> <span class="attribute">key</span>=<span class="value">"c"</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">component</span>=<span class="value">"ul"</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"0"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"1"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"2"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
);
|
|
}
|
|
});
|
|
|
|
var Page1 = React.createClass({
|
|
render() {
|
|
return (
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-router-child"</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">className</span>=<span class="value">"demo-content"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-kp"</span> <span class="attribute">key</span>=<span class="value">"b"</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">component</span>=<span class="value">"ul"</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"0"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"1"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"2"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-listBox"</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">className</span>=<span class="value">"demo-list"</span> <span class="attribute">delay</span>=<span class="value">{200}</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"title"</span> <span class="attribute">key</span>=<span class="value">"title3"</span>></span><span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">component</span>=<span class="value">"ul"</span> <span class="attribute">animConfig</span>=<span class="value">{{opacity:[1,</span> <span class="attribute">0</span>],<span class="attribute">translateY:</span>[<span class="attribute">0</span>, <span class="attribute">30</span>],<span class="attribute">scale:</span>[<span class="attribute">1</span>,<span class="attribute">0.9</span>]}} <span class="attribute">key</span>=<span class="value">"ul"</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"0"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"1"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"2"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
);
|
|
}
|
|
});
|
|
|
|
var Page2 = React.createClass({
|
|
render() {
|
|
return (
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-router-child"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-content"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"demo-listBox"</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">className</span>=<span class="value">"demo-list"</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"title"</span> <span class="attribute">key</span>=<span class="value">"title3"</span>></span><span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">QueueAnim</span> <span class="attribute">component</span>=<span class="value">"ul"</span> <span class="attribute">animConfig</span>=<span class="value">{{opacity:[1,</span> <span class="attribute">0</span>],<span class="attribute">translateY:</span>[<span class="attribute">0</span>, <span class="attribute">30</span>],<span class="attribute">scale:</span>[<span class="attribute">1</span>,<span class="attribute">0.9</span>]}} <span class="attribute">key</span>=<span class="value">"li"</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"0"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"1"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"2"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"3"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"4"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"><<span class="title">li</span> <span class="attribute">key</span>=<span class="value">"5"</span>></span><span class="tag"></<span class="title">li</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">QueueAnim</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render((
|
|
<span class="tag"><<span class="title">Router</span>></span>
|
|
<span class="tag"><<span class="title">Route</span> <span class="attribute">path</span>=<span class="value">"/"</span> <span class="attribute">component</span>=<span class="value">{App}</span> <span class="attribute">ignoreScrollBehavior</span>></span>
|
|
<span class="tag"><<span class="title">Route</span> <span class="attribute">path</span>=<span class="value">"page1"</span> <span class="attribute">component</span>=<span class="value">{Page1}</span> /></span>
|
|
<span class="tag"><<span class="title">Route</span> <span class="attribute">path</span>=<span class="value">"page2"</span> <span class="attribute">component</span>=<span class="value">{Page2}</span> /></span>
|
|
<span class="tag"></<span class="title">Route</span>></span>
|
|
<span class="tag"></<span class="title">Router</span>></span>
|
|
), document.getElementById('components-queue-anim-demo-router'));</span></code></pre></div><style type="text/css">#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><div class="highlight"><pre><code class="css"><span class="id">#components-queue-anim-demo-router</span> <span class="class">.demo-router-wrap</span> <span class="rules">{
|
|
<span class="rule"><span class="attribute">position</span>:<span class="value"> relative</span></span>;
|
|
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100</span>%</span></span>;
|
|
<span class="rule"><span class="attribute">margin</span>:<span class="value"> auto</span></span>;
|
|
<span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">200</span>px</span></span>;
|
|
<span class="rule"><span class="attribute">overflow</span>:<span class="value"> hidden</span></span>;
|
|
<span class="rule">}</span></span>
|
|
<span class="id">#components-queue-anim-demo-router</span> <span class="class">.queue-anim-leaving</span> <span class="rules">{
|
|
<span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;
|
|
<span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">100</span>%</span></span>;
|
|
<span class="rule">}</span></span></code></pre></div>
|
|
</div>
|
|
<div class="code-box-meta markdown">
|
|
<div class="code-box-title">
|
|
<a href="#anim-demo-router">Router 默认进出场</a>
|
|
</div>
|
|
<p>router 组合的进场与出场动画。</p>
|
|
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="api-container markdown"></div>
|
|
</section>
|
|
|
|
</div><footer id="footer">
|
|
<ul>
|
|
<li>
|
|
<h2>GitHub</h2>
|
|
<a target="_blank "href="https://github.com/ant-design/ant-design">仓库</a>
|
|
<a target="_blank" href="https://github.com/ant-design/ant-design/tree/master/style">样式</a>
|
|
<a target="_blank" href="https://github.com/ant-design/antd-bin">开发工具</a>
|
|
</li>
|
|
<li>
|
|
<h2>关于我们</h2>
|
|
<a href="https://github.com/alipay/x/issues">博客 - Ant UED</a>
|
|
</li>
|
|
<li>
|
|
<h2>联系我们</h2>
|
|
<a target="_blank" href="https://github.com/ant-design/ant-design/issues">问题与建议 - Issues</a>
|
|
</li>
|
|
<li>
|
|
<h3>©2015 蚂蚁金服体验技术部出品</h3>
|
|
<h3>文档版本：<span id="versions-select"></span></h3>
|
|
</li>
|
|
</ul>
|
|
</footer>
|
|
<script src="https://t.alipayobjects.com/images/rmsweb/T1AmXhXg0kXXXXXXXX.js" data-no-instant></script>
|
|
<script data-no-instant>
|
|
InstantClick.on('change', function() {
|
|
InstantClickChangeFns.forEach(function(fn) {
|
|
fn();
|
|
});
|
|
});
|
|
InstantClick.init();
|
|
</script>
|
|
</body>
|
|
</html> |