mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-13 23:07:49 +10:00
110 lines
30 KiB
HTML
110 lines
30 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="description" content="An enterprise-class UI design language and React-based implementation">
|
||
<meta name="description" content="A set of high-quality React components">
|
||
<meta name="description" content="One of best React UI library for enterprise background">
|
||
<title>Ant Design - A UI Design Language</title>
|
||
<script>
|
||
(function() {
|
||
function isLocalStorageNameSupported() {
|
||
var testKey = 'test';
|
||
var storage = window.localStorage;
|
||
try {
|
||
storage.setItem(testKey, '1');
|
||
storage.removeItem(testKey);
|
||
return true;
|
||
} catch (error) {
|
||
return false;
|
||
}
|
||
}
|
||
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
|
||
var pathname = location.pathname;
|
||
|
||
function isZhCN(pathname) {
|
||
return /-cn\/?$/.test(pathname);
|
||
}
|
||
function getLocalizedPathname(path, zhCN) {
|
||
var pathname = path.startsWith('/') ? path : '/' + path;
|
||
if (!zhCN) { // to enUS
|
||
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
|
||
} else if (pathname === '/') {
|
||
return '/index-cn';
|
||
} else if (pathname.endsWith('/')) {
|
||
return pathname.replace(/\/$/, '-cn/');
|
||
}
|
||
return pathname + '-cn';
|
||
}
|
||
|
||
// 兼容旧的 URL， `?locale=...`
|
||
var queryString = location.search;
|
||
if (queryString) {
|
||
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
|
||
if (isZhCNConfig && !isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
|
||
}
|
||
}
|
||
|
||
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
|
||
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
|
||
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
|
||
// safari is 'zh-cn', while other browser is 'zh-CN';
|
||
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
|
||
}
|
||
}
|
||
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
|
||
})()
|
||
</script>
|
||
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
|
||
<link rel="stylesheet" type="text/css" href="/index.css"/>
|
||
<style id="nprogress-style">
|
||
#nprogress { display: none }
|
||
</style>
|
||
<!--[if lte IE 10]>
|
||
<script
|
||
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
|
||
<![endif]-->
|
||
<script>
|
||
if (!window.Intl) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
|
||
}
|
||
if (!window.Promise) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
|
||
}
|
||
// Enable Google Analytics
|
||
if (!location.port) {
|
||
/* eslint-disable */
|
||
(function (i, s, o, g, r, a, m) {
|
||
i['GoogleAnalyticsObject'] = r;
|
||
i[r] = i[r] || function () {
|
||
(i[r].q = i[r].q || []).push(arguments)
|
||
}, i[r].l = 1 * new Date();
|
||
a = s.createElement(o),
|
||
m = s.getElementsByTagName(o)[0];
|
||
a.async = 1;
|
||
a.src = g;
|
||
m.parentNode.insertBefore(a, m)
|
||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||
ga('create', 'UA-72788897-1', 'auto');
|
||
ga('send', 'pageview');
|
||
/* eslint-enable */
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="react-content">
|
||
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="1734455485"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Specification</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/spec/introduce" data-reactid="52">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/spec/cases" data-reactid="54">Cases</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/spec/feature" data-reactid="56">Features</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="57"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Principles$Menu" aria-haspopup="true" data-reactid="58"><h4 data-reactid="59">Principles</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Principles$Menu" data-reactid="60"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/docs/spec/principle" data-reactid="62">Introduction</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/spec/proximity" data-reactid="64">Proximity</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="/docs/spec/alignment" data-reactid="66">Alignment</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="67"><a href="/docs/spec/contrast" data-reactid="68">Contrast</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="69"><a href="/docs/spec/repetition" data-reactid="70">Repetition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="71"><a href="/docs/spec/direct" data-reactid="72">Make it Direct</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="73"><a href="/docs/spec/lightweight" data-reactid="74">Keep it Lightweight</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="75"><a href="/docs/spec/stay" data-reactid="76">Stay on the Page</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/docs/spec/invitation" data-reactid="78">Provide an Invitation</a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="79"><a href="/docs/spec/transition" data-reactid="80">Use Transition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/docs/spec/reaction" data-reactid="82">React Immediately</a></li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="83"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Design Fundamental$Menu" aria-haspopup="true" data-reactid="84"><h4 data-reactid="85">Design Fundamental</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Design Fundamental$Menu" data-reactid="86"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="87"><a href="/docs/spec/font" data-reactid="88">Font</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="89"><a href="/docs/spec/typography" data-reactid="90">Typography</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="91"><a href="/docs/spec/colors" data-reactid="92">Colors</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/docs/spec/layout" data-reactid="94">Layout</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="95"><a href="/docs/spec/motion" data-reactid="96">Motion</a></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="97"><article class="markdown" data-reactid="98"><h1 data-reactid="99"><!-- react-text: 100 -->Use Transition<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/transition.en-US.md" data-reactid="101"><i class="anticon anticon-edit" data-reactid="102"></i></a></h1><section class="markdown" data-reactid="103"><p data-reactid="104"><!-- react-text: 105 -->Our Gray Matter are wired to react to dynamic things like movement,shape change and colour change. Transitions smooth out the jarring world of the Web, making changes appear more natural. The main purpose for Transitions is to provide an engaging interface and reinforce communication.<!-- /react-text --></p><ul data-reactid="106"><li data-reactid="107"><p data-reactid="108"><!-- react-text: 109 -->Adding: The added elements should inform the users how to use, and the modified elements should be recognized.<!-- /react-text --></p></li><li data-reactid="110"><p data-reactid="111"><!-- react-text: 112 -->Receding: The irrelevant page elements should be removed properly.<!-- /react-text --></p></li><li data-reactid="113"><p data-reactid="114"><!-- react-text: 115 -->Normal: The elements without any change on the page can be safely ignored.<!-- /react-text --></p></li></ul></section><section class="toc" data-reactid="116"><ul data-reactid="117"><li data-reactid="118"><a class="bisheng-toc-h2" href="#Maintain-Context-While-Changing-Views" data-reactid="119"><!-- react-text: 120 -->Maintain Context While Changing Views<!-- /react-text --></a></li><li data-reactid="121"><a class="bisheng-toc-h2" href="#Explain-What-Just-Happened" data-reactid="122"><!-- react-text: 123 -->Explain What Just Happened<!-- /react-text --></a></li><li data-reactid="124"><a class="bisheng-toc-h2" href="#Improve-Perceived-Performance" data-reactid="125"><!-- react-text: 126 -->Improve Perceived Performance<!-- /react-text --></a></li><li data-reactid="127"><a class="bisheng-toc-h2" href="#Natural-Motion" data-reactid="128"><!-- react-text: 129 -->Natural Motion<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="130"><h2 id="Maintain-Context-While-Changing-Views" data-reactid="131"><span data-reactid="132"><!-- react-text: 133 -->Maintain Context While Changing Views<!-- /react-text --></span><a href="#Maintain-Context-While-Changing-Views" class="anchor" data-reactid="134">#</a></h2><div class="preview-image-box transition-video-player" data-reactid="135"><div class="preview-image-wrapper" data-reactid="136"><section style="position:relative;" data-reactid="137"><video src="https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="138"></video><section style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.35);cursor:pointer;opacity:1;transition:opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);" data-reactid="139"><svg version="1.2" viewBox="0 0 60 60" width="60" height="60" style="position:absolute;top:50%;left:50%;margin:-30px;border-radius:30px;background-color:#fff;" data-reactid="140"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="141"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="142"></path></svg></section></section></div><div class="preview-image-title" data-reactid="143">example of Slide In and Slide Out
|
||
</div><div class="preview-image-description" data-reactid="144"></div></div><p data-reactid="145"><!-- react-text: 146 -->Slide In and Slide Out: Create an illusion of virtual space.<!-- /react-text --></p><p data-reactid="147"><br data-reactid="148"/></p><div class="preview-image-box transition-video-player" data-reactid="149"><div class="preview-image-wrapper" data-reactid="150"><section style="position:relative;" data-reactid="151"><video src="https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="152"></video><section style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.35);cursor:pointer;opacity:1;transition:opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);" data-reactid="153"><svg version="1.2" viewBox="0 0 60 60" width="60" height="60" style="position:absolute;top:50%;left:50%;margin:-30px;border-radius:30px;background-color:#fff;" data-reactid="154"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="155"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="156"></path></svg></section></section></div><div class="preview-image-title" data-reactid="157">example of Carousel</div><div class="preview-image-description" data-reactid="158"></div></div><p data-reactid="159"><!-- react-text: 160 -->Carousel: Carousels are great for extending virtual space.<!-- /react-text --></p><p data-reactid="161"><br data-reactid="162"/></p><div class="preview-image-box transition-video-player" data-reactid="163"><div class="preview-image-wrapper" data-reactid="164"><section style="position:relative;" data-reactid="165"><video src="https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="166"></video><section style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.35);cursor:pointer;opacity:1;transition:opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);" data-reactid="167"><svg version="1.2" viewBox="0 0 60 60" width="60" height="60" style="position:absolute;top:50%;left:50%;margin:-30px;border-radius:30px;background-color:#fff;" data-reactid="168"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="169"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="170"></path></svg></section></section></div><div class="preview-image-title" data-reactid="171">example of Accordion</div><div class="preview-image-description" data-reactid="172"></div></div><p data-reactid="173"><!-- react-text: 174 -->Accordion: Accordion helps maintain context while switching views.<!-- /react-text --></p><p data-reactid="175"><br data-reactid="176"/></p><p data-reactid="177"><span class="waiting" data-reactid="178"><!-- react-text: 179 -->View Navigation (coming soon)<!-- /react-text --></span></p><p data-reactid="180"><br data-reactid="181"/></p><hr data-reactid="182"/><h2 id="Explain-What-Just-Happened" data-reactid="183"><span data-reactid="184"><!-- react-text: 185 -->Explain What Just Happened<!-- /react-text --></span><a href="#Explain-What-Just-Happened" class="anchor" data-reactid="186">#</a></h2><div class="preview-image-box transition-video-player" data-reactid="187"><div class="preview-image-wrapper" data-reactid="188"><section style="position:relative;" data-reactid="189"><video src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="190"></video><section style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.35);cursor:pointer;opacity:1;transition:opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);" data-reactid="191"><svg version="1.2" viewBox="0 0 60 60" width="60" height="60" style="position:absolute;top:50%;left:50%;margin:-30px;border-radius:30px;background-color:#fff;" data-reactid="192"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="193"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="194"></path></svg></section></section></div><div class="preview-image-title" data-reactid="195">example of Adding an Object</div><div class="preview-image-description" data-reactid="196">When an object is added, the highlighted area shows it to the user. The highlight fades in several seconds in order not to interfere the user flow.</div></div><p data-reactid="197"><!-- react-text: 198 -->Adding an Object: Add an object in the table or chart.<!-- /react-text --></p><p data-reactid="199"><br data-reactid="200"/></p><div class="preview-image-box transition-video-player" data-reactid="201"><div class="preview-image-wrapper" data-reactid="202"><section style="position:relative;" data-reactid="203"><video src="https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="204"></video><section style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.35);cursor:pointer;opacity:1;transition:opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);" data-reactid="205"><svg version="1.2" viewBox="0 0 60 60" width="60" height="60" style="position:absolute;top:50%;left:50%;margin:-30px;border-radius:30px;background-color:#fff;" data-reactid="206"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="207"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="208"></path></svg></section></section></div><div class="preview-image-title" data-reactid="209">example of Deleting Objects</div><div class="preview-image-description" data-reactid="210"></div></div><p data-reactid="211"><!-- react-text: 212 -->Deleting an Object: Delete an object in the table or chart.<!-- /react-text --></p><p data-reactid="213"><br data-reactid="214"/></p><div class="preview-image-box transition-video-player" data-reactid="215"><div class="preview-image-wrapper" data-reactid="216"><section style="position:relative;" data-reactid="217"><video src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="218"></video><section style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.35);cursor:pointer;opacity:1;transition:opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);" data-reactid="219"><svg version="1.2" viewBox="0 0 60 60" width="60" height="60" style="position:absolute;top:50%;left:50%;margin:-30px;border-radius:30px;background-color:#fff;" data-reactid="220"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="221"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="222"></path></svg></section></section></div><div class="preview-image-title" data-reactid="223">example of Modifying an object</div><div class="preview-image-description" data-reactid="224">Status No.1: The user modifies the value of Detail. <br>Status No.2: After the user click the save button, a yellow fill is displayed in the grid of Detail, which indicates the change of the object. <br>Status No.3: The fill fades in several seconds and returned to normal.</div></div><p data-reactid="225"><!-- react-text: 226 -->Modifying an Object: Modify an object in the table or chart.<!-- /react-text --></p><p data-reactid="227"><br data-reactid="228"/></p><div class="preview-image-box transition-video-player" data-reactid="229"><div class="preview-image-wrapper" data-reactid="230"><section style="position:relative;" data-reactid="231"><video src="https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="232"></video><section style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.35);cursor:pointer;opacity:1;transition:opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);" data-reactid="233"><svg version="1.2" viewBox="0 0 60 60" width="60" height="60" style="position:absolute;top:50%;left:50%;margin:-30px;border-radius:30px;background-color:#fff;" data-reactid="234"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="235"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="236"></path></svg></section></section></div><div class="preview-image-title" data-reactid="237">example of Calling out an Object</div><div class="preview-image-description" data-reactid="238"></div></div><p data-reactid="239"><!-- react-text: 240 -->Calling out an Object: Click the page element and call out a new object.<!-- /react-text --></p><hr data-reactid="241"/><h2 id="Improve-Perceived-Performance" data-reactid="242"><span data-reactid="243"><!-- react-text: 244 -->Improve Perceived Performance<!-- /react-text --></span><a href="#Improve-Perceived-Performance" class="anchor" data-reactid="245">#</a></h2><p data-reactid="246"><!-- react-text: 247 -->If actual performance can hardly improved, there is a difference between actual performance and perceived performance. Diverting the user’s attention is a good way to improve the perceived time an operation takes.<!-- /react-text --></p><p data-reactid="248"><br data-reactid="249"/></p><p data-reactid="250"><span class="waiting" data-reactid="251"><!-- react-text: 252 -->Image (coming soon)<!-- /react-text --></span></p><hr data-reactid="253"/><h2 id="Natural-Motion" data-reactid="254"><span data-reactid="255"><!-- react-text: 256 -->Natural Motion<!-- /react-text --></span><a href="#Natural-Motion" class="anchor" data-reactid="257">#</a></h2><p data-reactid="258"><!-- react-text: 259 -->Please refer to <!-- /react-text --><a href="http://motion.ant.design/#/language/" data-reactid="260"><!-- react-text: 261 -->Ant Motion, a motion language<!-- /react-text --></a><!-- react-text: 262 -->。<!-- /react-text --></p></section></article></div></div><div class="ant-row" data-reactid="263"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="264"><section class="prev-next-nav" data-reactid="265"><a class="prev-page" href="/docs/spec/invitation" data-reactid="266">Provide an Invitation</a><a class="next-page" href="/docs/spec/reaction" data-reactid="267">React Immediately</a></section></div></div></div><footer id="footer" data-reactid="268"><ul data-reactid="269"><li data-reactid="270"><h2 data-reactid="271"><i class="anticon anticon-github" data-reactid="272"></i><!-- react-text: 273 --> GitHub<!-- /react-text --></h2><div data-reactid="274"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="275"><span data-reactid="276">Repository</span></a></div><div data-reactid="277"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="278"><span data-reactid="279">Customize Theme</span></a></div><div data-reactid="280"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="281"><span data-reactid="282">Awesome Ant Design</span></a></div></li><li data-reactid="283"><h2 data-reactid="284"><i class="anticon anticon-link" data-reactid="285"></i><!-- react-text: 286 --> <!-- /react-text --><span data-reactid="287">Links</span></h2><div data-reactid="288"><a href="http://mobile.ant.design" data-reactid="289">Ant Design Mobile</a><span data-reactid="290"> - </span><span data-reactid="291">Mobile UI</span></div><div data-reactid="292"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="293">dva</a><!-- react-text: 294 --> - <!-- /react-text --><span data-reactid="295">Framework</span></div><div data-reactid="296"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="297">dva-cli</a><!-- react-text: 298 --> -<!-- /react-text --><span data-reactid="299">Developer Tools</span></div><div data-reactid="300"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="301">Egg</a><span data-reactid="302"> - </span><span data-reactid="303">Enterprise Node Framework</span></div><div data-reactid="304"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="305">AntV</a><span data-reactid="306"> - </span><span data-reactid="307">Data Visualization</span></div><div data-reactid="308"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="309">Ant Motion</a><span data-reactid="310"> - </span><span data-reactid="311">Motion Soluction</span></div><div data-reactid="312"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="313">AntD Library</a><span data-reactid="314"> - </span><span data-reactid="315">Axure library</span></div><div data-reactid="316"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="317">Ant UX</a><span data-reactid="318"> - </span><span data-reactid="319">Sitemap Template</span></div></li><li data-reactid="320"><h2 data-reactid="321"><i class="anticon anticon-customer-service" data-reactid="322"></i><!-- react-text: 323 --> <!-- /react-text --><span data-reactid="324">Community</span></h2><div data-reactid="325"><a href="/changelog" data-reactid="326"><span data-reactid="327">Change Log</span></a></div><div data-reactid="328"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="329"><span data-reactid="330">FAQ</span></a></div><div data-reactid="331"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="332"><span data-reactid="333">Chat Room</span></a></div><div data-reactid="334"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="335"><span data-reactid="336">Bug Report</span></a></div><div data-reactid="337"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="338"><span data-reactid="339">StackOverflow</span></a></div><div data-reactid="340"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="341"><span data-reactid="342">SegmentFault</span></a></div></li><li data-reactid="343"><h2 data-reactid="344"><!-- react-text: 345 -->Copyright © <!-- /react-text --><!-- react-text: 346 -->2017<!-- /react-text --></h2><div data-reactid="347"><span data-reactid="348">Created by Ant UED</span></div><div data-reactid="349"><!-- react-text: 350 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="351">BiSheng</a></div></li></ul></footer></div>
|
||
</div>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|