Files
ant-design/docs/spec/motion.html
T
2017-03-11 12:51:12 +08:00

110 lines
32 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="1278598290"><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" 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" role="menuitem" aria-selected="false" 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-selected 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-selected ant-menu-item" role="menuitem" aria-selected="true" 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 -->Motion<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/motion.md" data-reactid="101"><i class="anticon anticon-edit" data-reactid="102"></i></a></h1><section class="toc" data-reactid="103"><ul data-reactid="104"><li data-reactid="105"><a class="bisheng-toc-h2" href="#组件动画" data-reactid="106"><!-- react-text: 107 -->组件动画<!-- /react-text --></a></li><li data-reactid="108"><a class="bisheng-toc-h2" href="#缓动函数" data-reactid="109"><!-- react-text: 110 -->缓动函数<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="111"><p data-reactid="112"><!-- react-text: 113 -->依据『巧用过渡』的设计原则,Ant Design 提供了一些预设的组件动画和缓动函数。更多动画可参考 <!-- /react-text --><a href="https://motion.ant.design/" data-reactid="114"><!-- react-text: 115 -->Ant Motion<!-- /react-text --></a></p><blockquote data-reactid="116"><p data-reactid="117"><!-- react-text: 118 -->示例延长了动画时长以便展示。<!-- /react-text --></p></blockquote><div data-reactid="119"><div class="motion-container" data-reactid="120"><div class="motion-example" data-reactid="121"></div></div><div class="motion-select-wrapper" data-reactid="122"><div class="motion-select ant-select ant-select-enabled" data-reactid="123"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="124"><div class="ant-select-selection__rendered" data-reactid="125"><div class="ant-select-selection-selected-value" title="请选择预设动画" style="display:block;opacity:1;" data-reactid="126">请选择预设动画</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="127"><b data-reactid="128"></b></span></div></div></div></div><h2 id="组件动画" data-reactid="129"><span data-reactid="130"><!-- react-text: 131 -->组件动画<!-- /react-text --></span><a href="#组件动画" class="anchor" data-reactid="132">#</a></h2><table data-reactid="133"><thead data-reactid="134"><tr data-reactid="135"><th data-reactid="136"><!-- react-text: 137 -->组件<!-- /react-text --></th><th data-reactid="138"><!-- react-text: 139 -->中文名<!-- /react-text --></th><th data-reactid="140"><!-- react-text: 141 -->采用动画<!-- /react-text --></th></tr></thead><tbody data-reactid="142"><tr data-reactid="143"><td data-reactid="144"><!-- react-text: 145 -->Popover<!-- /react-text --></td><td data-reactid="146"><!-- react-text: 147 -->气泡浮出<!-- /react-text --></td><td data-reactid="148"><code data-reactid="149"><!-- react-text: 150 -->zoom-up<!-- /react-text --></code><!-- react-text: 151 --> <!-- /react-text --><code data-reactid="152"><!-- react-text: 153 -->zoom-down<!-- /react-text --></code><!-- react-text: 154 --> <!-- /react-text --><code data-reactid="155"><!-- react-text: 156 -->zoom-left<!-- /react-text --></code><!-- react-text: 157 --> <!-- /react-text --><code data-reactid="158"><!-- react-text: 159 -->zoom-right<!-- /react-text --></code></td></tr><tr data-reactid="160"><td data-reactid="161"><!-- react-text: 162 -->Popconfirm<!-- /react-text --></td><td data-reactid="163"><!-- react-text: 164 -->气泡确认<!-- /react-text --></td><td data-reactid="165"><code data-reactid="166"><!-- react-text: 167 -->zoom-up<!-- /react-text --></code><!-- react-text: 168 --> <!-- /react-text --><code data-reactid="169"><!-- react-text: 170 -->zoom-down<!-- /react-text --></code><!-- react-text: 171 --> <!-- /react-text --><code data-reactid="172"><!-- react-text: 173 -->zoom-left<!-- /react-text --></code><!-- react-text: 174 --> <!-- /react-text --><code data-reactid="175"><!-- react-text: 176 -->zoom-right<!-- /react-text --></code></td></tr><tr data-reactid="177"><td data-reactid="178"><!-- react-text: 179 -->Tooltip<!-- /react-text --></td><td data-reactid="180"><!-- react-text: 181 -->文字提示<!-- /react-text --></td><td data-reactid="182"><code data-reactid="183"><!-- react-text: 184 -->zoom-up<!-- /react-text --></code><!-- react-text: 185 --> <!-- /react-text --><code data-reactid="186"><!-- react-text: 187 -->zoom-down<!-- /react-text --></code><!-- react-text: 188 --> <!-- /react-text --><code data-reactid="189"><!-- react-text: 190 -->zoom-left<!-- /react-text --></code><!-- react-text: 191 --> <!-- /react-text --><code data-reactid="192"><!-- react-text: 193 -->zoom-right<!-- /react-text --></code></td></tr><tr data-reactid="194"><td data-reactid="195"><!-- react-text: 196 -->Modal<!-- /react-text --></td><td data-reactid="197"><!-- react-text: 198 -->弹出框<!-- /react-text --></td><td data-reactid="199"><code data-reactid="200"><!-- react-text: 201 -->zoom<!-- /react-text --></code></td></tr><tr data-reactid="202"><td data-reactid="203"><!-- react-text: 204 -->Badge<!-- /react-text --></td><td data-reactid="205"><!-- react-text: 206 -->徽标数<!-- /react-text --></td><td data-reactid="207"><code data-reactid="208"><!-- react-text: 209 -->zoom<!-- /react-text --></code></td></tr><tr data-reactid="210"><td data-reactid="211"><!-- react-text: 212 -->message<!-- /react-text --></td><td data-reactid="213"><!-- react-text: 214 -->信息提示条<!-- /react-text --></td><td data-reactid="215"><code data-reactid="216"><!-- react-text: 217 -->move-up<!-- /react-text --></code></td></tr><tr data-reactid="218"><td data-reactid="219"><!-- react-text: 220 -->notification<!-- /react-text --></td><td data-reactid="221"><!-- react-text: 222 -->通知框<!-- /react-text --></td><td data-reactid="223"><code data-reactid="224"><!-- react-text: 225 -->move-right<!-- /react-text --></code><!-- react-text: 226 --> &amp; <!-- /react-text --><code data-reactid="227"><!-- react-text: 228 -->slide-up<!-- /react-text --></code></td></tr><tr data-reactid="229"><td data-reactid="230"><!-- react-text: 231 -->Dropdown<!-- /react-text --></td><td data-reactid="232"><!-- react-text: 233 -->下拉菜单<!-- /react-text --></td><td data-reactid="234"><code data-reactid="235"><!-- react-text: 236 -->slide-up<!-- /react-text --></code></td></tr><tr data-reactid="237"><td data-reactid="238"><!-- react-text: 239 -->Select<!-- /react-text --></td><td data-reactid="240"><!-- react-text: 241 -->选择框<!-- /react-text --></td><td data-reactid="242"><code data-reactid="243"><!-- react-text: 244 -->slide-up<!-- /react-text --></code></td></tr><tr data-reactid="245"><td data-reactid="246"><!-- react-text: 247 -->Cascader<!-- /react-text --></td><td data-reactid="248"><!-- react-text: 249 -->级联选择框<!-- /react-text --></td><td data-reactid="250"><code data-reactid="251"><!-- react-text: 252 -->slide-up<!-- /react-text --></code></td></tr><tr data-reactid="253"><td data-reactid="254"><!-- react-text: 255 -->TreeSelect<!-- /react-text --></td><td data-reactid="256"><!-- react-text: 257 -->树选择框<!-- /react-text --></td><td data-reactid="258"><code data-reactid="259"><!-- react-text: 260 -->slide-up<!-- /react-text --></code></td></tr><tr data-reactid="261"><td data-reactid="262"><!-- react-text: 263 -->DatePicker<!-- /react-text --></td><td data-reactid="264"><!-- react-text: 265 -->日期选择框<!-- /react-text --></td><td data-reactid="266"><code data-reactid="267"><!-- react-text: 268 -->slide-up<!-- /react-text --></code></td></tr><tr data-reactid="269"><td data-reactid="270"><!-- react-text: 271 -->TatePicker<!-- /react-text --></td><td data-reactid="272"><!-- react-text: 273 -->日期选择框<!-- /react-text --></td><td data-reactid="274"><code data-reactid="275"><!-- react-text: 276 -->slide-up<!-- /react-text --></code></td></tr><tr data-reactid="277"><td data-reactid="278"><!-- react-text: 279 -->Alert<!-- /react-text --></td><td data-reactid="280"><!-- react-text: 281 -->警告提示<!-- /react-text --></td><td data-reactid="282"><code data-reactid="283"><!-- react-text: 284 -->slide-up<!-- /react-text --></code></td></tr><tr data-reactid="285"><td data-reactid="286"><!-- react-text: 287 -->Menu<!-- /react-text --></td><td data-reactid="288"><!-- react-text: 289 -->导航菜单<!-- /react-text --></td><td data-reactid="290"><code data-reactid="291"><!-- react-text: 292 -->slide-up<!-- /react-text --></code></td></tr></tbody></table><p data-reactid="293"><!-- react-text: 294 -->在 React 的前端实现中,可以使用 <!-- /react-text --><a href="https://github.com/react-component/animate" data-reactid="295"><!-- react-text: 296 -->rc-animate<!-- /react-text --></a><!-- react-text: 297 --><!-- /react-text --><a href="http://react-component.github.io/animate/examples/simple.html" data-reactid="298"><!-- react-text: 299 -->transitionName<!-- /react-text --></a><!-- react-text: 300 --> 属性来给任意元素指定动画。<!-- /react-text --></p><h2 id="缓动函数" data-reactid="301"><span data-reactid="302"><!-- react-text: 303 -->缓动函数<!-- /react-text --></span><a href="#缓动函数" class="anchor" data-reactid="304">#</a></h2><blockquote data-reactid="305"><p data-reactid="306"><code data-reactid="307"><!-- react-text: 308 -->move@enter<!-- /react-text --></code><!-- react-text: 309 --> 表示 <!-- /react-text --><code data-reactid="310"><!-- react-text: 311 -->移动@进入<!-- /react-text --></code><!-- react-text: 312 --><!-- /react-text --></p></blockquote><table data-reactid="313"><thead data-reactid="314"><tr data-reactid="315"><th data-reactid="316"><!-- react-text: 317 -->名称<!-- /react-text --></th><th data-reactid="318"><!-- react-text: 319 -->参数<!-- /react-text --></th><th data-reactid="320"><!-- react-text: 321 -->说明<!-- /react-text --></th><th data-reactid="322"><!-- react-text: 323 -->应用动画<!-- /react-text --></th></tr></thead><tbody data-reactid="324"><tr data-reactid="325"><td data-reactid="326"><!-- react-text: 327 -->@ease-out<!-- /react-text --></td><td data-reactid="328"><code data-reactid="329"><!-- react-text: 330 -->cubic-bezier(0.215,0.61,0.355,1);<!-- /react-text --></code></td><td data-reactid="331"><!-- react-text: 332 -->默认后缓动<!-- /react-text --></td><td data-reactid="333"></td></tr><tr data-reactid="334"><td data-reactid="335"><!-- react-text: 336 -->@ease-in<!-- /react-text --></td><td data-reactid="337"><code data-reactid="338"><!-- react-text: 339 -->cubic-bezier(0.55,0.055,0.675,0.19);<!-- /react-text --></code></td><td data-reactid="340"><!-- react-text: 341 -->默认前缓动<!-- /react-text --></td><td data-reactid="342"></td></tr><tr data-reactid="343"><td data-reactid="344"><!-- react-text: 345 -->@ease-in-out<!-- /react-text --></td><td data-reactid="346"><code data-reactid="347"><!-- react-text: 348 -->cubic-bezier(0.645,0.045,0.355,1);<!-- /react-text --></code></td><td data-reactid="349"><!-- react-text: 350 -->默认前后缓动<!-- /react-text --></td><td data-reactid="351"></td></tr><tr data-reactid="352"><td data-reactid="353"><!-- react-text: 354 -->@ease-out-back<!-- /react-text --></td><td data-reactid="355"><code data-reactid="356"><!-- react-text: 357 -->cubic-bezier(0.18,0.89,0.32,1.28);<!-- /react-text --></code></td><td data-reactid="358"><!-- react-text: 359 -->结束回动<!-- /react-text --></td><td data-reactid="360"></td></tr><tr data-reactid="361"><td data-reactid="362"><!-- react-text: 363 -->@ease-in-back<!-- /react-text --></td><td data-reactid="364"><code data-reactid="365"><!-- react-text: 366 -->cubic-bezier(0.6,-0.3,0.74,0.05);<!-- /react-text --></code></td><td data-reactid="367"><!-- react-text: 368 -->开始回动<!-- /react-text --></td><td data-reactid="369"></td></tr><tr data-reactid="370"><td data-reactid="371"><!-- react-text: 372 -->@ease-in-out-back<!-- /react-text --></td><td data-reactid="373"><code data-reactid="374"><!-- react-text: 375 -->cubic-bezier(0.68,-0.55,0.27,1.55);<!-- /react-text --></code></td><td data-reactid="376"><!-- react-text: 377 -->前后回动<!-- /react-text --></td><td data-reactid="378"></td></tr><tr data-reactid="379"><td data-reactid="380"><!-- react-text: 381 -->@ease-out-circ<!-- /react-text --></td><td data-reactid="382"><code data-reactid="383"><!-- react-text: 384 -->cubic-bezier(0.08,0.82,0.17,1);<!-- /react-text --></code></td><td data-reactid="385"><!-- react-text: 386 -->圆形后缓动<!-- /react-text --></td><td data-reactid="387"><code data-reactid="388"><!-- react-text: 389 -->move@enter<!-- /react-text --></code><!-- react-text: 390 --> <!-- /react-text --><code data-reactid="391"><!-- react-text: 392 -->zoom@enter<!-- /react-text --></code></td></tr><tr data-reactid="393"><td data-reactid="394"><!-- react-text: 395 -->@ease-in-circ<!-- /react-text --></td><td data-reactid="396"><code data-reactid="397"><!-- react-text: 398 -->cubic-bezier(0.6,0.04,0.98,0.34);<!-- /react-text --></code></td><td data-reactid="399"><!-- react-text: 400 -->圆形前缓动<!-- /react-text --></td><td data-reactid="401"><code data-reactid="402"><!-- react-text: 403 -->move@leave<!-- /react-text --></code></td></tr><tr data-reactid="404"><td data-reactid="405"><!-- react-text: 406 -->@ease-in-out-circ<!-- /react-text --></td><td data-reactid="407"><code data-reactid="408"><!-- react-text: 409 -->cubic-bezier(0.78,0.14,0.15,0.86);<!-- /react-text --></code></td><td data-reactid="410"><!-- react-text: 411 -->圆形前后缓动<!-- /react-text --></td><td data-reactid="412"><code data-reactid="413"><!-- react-text: 414 -->zoom@leave<!-- /react-text --></code></td></tr><tr data-reactid="415"><td data-reactid="416"><!-- react-text: 417 -->@ease-out-quint<!-- /react-text --></td><td data-reactid="418"><code data-reactid="419"><!-- react-text: 420 -->cubic-bezier(0.23, 1, 0.32, 1);<!-- /react-text --></code></td><td data-reactid="421"><!-- react-text: 422 -->quint 后缓动<!-- /react-text --></td><td data-reactid="423"><code data-reactid="424"><!-- react-text: 425 -->slide@enter<!-- /react-text --></code></td></tr><tr data-reactid="426"><td data-reactid="427"><!-- react-text: 428 -->@ease-in-quint<!-- /react-text --></td><td data-reactid="429"><code data-reactid="430"><!-- react-text: 431 -->cubic-bezier(0.755, 0.05, 0.855, 0.06);<!-- /react-text --></code></td><td data-reactid="432"><!-- react-text: 433 -->quint 前缓动<!-- /react-text --></td><td data-reactid="434"><code data-reactid="435"><!-- react-text: 436 -->slide@leave<!-- /react-text --></code></td></tr><tr data-reactid="437"><td data-reactid="438"><!-- react-text: 439 -->@ease-in-out-quint<!-- /react-text --></td><td data-reactid="440"><code data-reactid="441"><!-- react-text: 442 -->cubic-bezier(0.86, 0, 0.07, 1);<!-- /react-text --></code></td><td data-reactid="443"><!-- react-text: 444 -->quint 前后缓动<!-- /react-text --></td><td data-reactid="445"></td></tr></tbody></table></section></article></div></div><div class="ant-row" data-reactid="446"><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="447"><section class="prev-next-nav" data-reactid="448"><a class="prev-page" href="/docs/spec/layout" data-reactid="449">Layout</a></section></div></div></div><footer id="footer" data-reactid="450"><ul data-reactid="451"><li data-reactid="452"><h2 data-reactid="453"><i class="anticon anticon-github" data-reactid="454"></i><!-- react-text: 455 --> GitHub<!-- /react-text --></h2><div data-reactid="456"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="457"><span data-reactid="458">Repository</span></a></div><div data-reactid="459"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="460"><span data-reactid="461">Customize Theme</span></a></div><div data-reactid="462"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="463"><span data-reactid="464">Awesome Ant Design</span></a></div></li><li data-reactid="465"><h2 data-reactid="466"><i class="anticon anticon-link" data-reactid="467"></i><!-- react-text: 468 --> <!-- /react-text --><span data-reactid="469">Links</span></h2><div data-reactid="470"><a href="http://mobile.ant.design" data-reactid="471">Ant Design Mobile</a><span data-reactid="472"> - </span><span data-reactid="473">Mobile UI</span></div><div data-reactid="474"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="475">dva</a><!-- react-text: 476 --> - <!-- /react-text --><span data-reactid="477">Framework</span></div><div data-reactid="478"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="479">dva-cli</a><!-- react-text: 480 --> -<!-- /react-text --><span data-reactid="481">Developer Tools</span></div><div data-reactid="482"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="483">Egg</a><span data-reactid="484"> - </span><span data-reactid="485">Enterprise Node Framework</span></div><div data-reactid="486"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="487">AntV</a><span data-reactid="488"> - </span><span data-reactid="489">Data Visualization</span></div><div data-reactid="490"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="491">Ant Motion</a><span data-reactid="492"> - </span><span data-reactid="493">Motion Soluction</span></div><div data-reactid="494"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="495">AntD Library</a><span data-reactid="496"> - </span><span data-reactid="497">Axure library</span></div><div data-reactid="498"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="499">Ant UX</a><span data-reactid="500"> - </span><span data-reactid="501">Sitemap Template</span></div></li><li data-reactid="502"><h2 data-reactid="503"><i class="anticon anticon-customer-service" data-reactid="504"></i><!-- react-text: 505 --> <!-- /react-text --><span data-reactid="506">Community</span></h2><div data-reactid="507"><a href="/changelog" data-reactid="508"><span data-reactid="509">Change Log</span></a></div><div data-reactid="510"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="511"><span data-reactid="512">FAQ</span></a></div><div data-reactid="513"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="514"><span data-reactid="515">Chat Room</span></a></div><div data-reactid="516"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="517"><span data-reactid="518">Bug Report</span></a></div><div data-reactid="519"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="520"><span data-reactid="521">StackOverflow</span></a></div><div data-reactid="522"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="523"><span data-reactid="524">SegmentFault</span></a></div></li><li data-reactid="525"><h2 data-reactid="526"><!-- react-text: 527 -->Copyright © <!-- /react-text --><!-- react-text: 528 -->2017<!-- /react-text --></h2><div data-reactid="529"><span data-reactid="530">Created by Ant UED</span></div><div data-reactid="531"><!-- react-text: 532 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="533">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>