home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-22 11:16:35 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
a353d0e752b3a23eef1cec910afe84bfaecb5961
ant-design/docs/spec/transition.html
T
Wei Zhu a353d0e752 Updates
2016-11-28 14:36:08 +08:00

77 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
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="Ant Design - An enterprise-class UI design language and React-based implementation">
<title>Ant Design - One Design Language</title>
<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-1.css"/>
<link rel="stylesheet" type="text/css" href="/index-2.css"/>
<!--[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>');
}
</script>
</head>
<body>
<div id="react-content" hidden>
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="1764026473"><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-6 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 style="display:block;" class="ant-col-xs-0 ant-col-sm-17 ant-col-md-18 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"></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="19"><b data-reactid="20"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="21"><span data-reactid="22">中文</span></button><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="23"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="24"><a href="/" data-reactid="25"><span data-reactid="26">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="27"><a href="/docs/spec/introduce" data-reactid="28"><span data-reactid="29">Specification</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="30"><a href="/docs/react/introduce" data-reactid="31"><span data-reactid="32">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="33"><a href="/docs/pattern/navigation" data-reactid="34"><span data-reactid="35">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="36"><a href="/docs/practice/cases" data-reactid="37"><span data-reactid="38">Practice</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="39"><a href="/docs/resource/download" data-reactid="40"><span data-reactid="41">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="42"><div class="ant-row" data-reactid="43"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="44"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="45"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="46"><a href="docs/spec/introduce" data-reactid="47">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="48"><a href="docs/spec/feature" data-reactid="49">Features</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-selected ant-menu-submenu" data-reactid="50"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-open="false" aria-owns="1480314949602_87" aria-haspopup="true" data-reactid="51"><h4 data-reactid="52">Principles</h4></div><!-- react-empty: 53 --></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="54"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-open="false" aria-owns="1480314949603_88" aria-haspopup="true" data-reactid="55"><h4 data-reactid="56">Design Fundamental</h4></div><!-- react-empty: 57 --></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="58"><article class="markdown" data-reactid="59"><h1 data-reactid="60"><!-- react-text: 61 -->Use Transition<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/transition.en-US.md" data-reactid="62"><i class="anticon anticon-edit" data-reactid="63"></i></a></h1><section class="markdown" data-reactid="64"><p data-reactid="65"><!-- react-text: 66 -->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="67"><li data-reactid="68"><p data-reactid="69"><!-- react-text: 70 -->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="71"><p data-reactid="72"><!-- react-text: 73 -->Receding: The irrelevant page elements should be removed properly.<!-- /react-text --></p></li><li data-reactid="74"><p data-reactid="75"><!-- react-text: 76 -->Normal: The elements without any change on the page can be safely ignored.<!-- /react-text --></p></li></ul></section><section class="toc" data-reactid="77"><ul data-reactid="78"><li data-reactid="79"><a href="#Maintain-Context-While-Changing-Views" data-reactid="80"><!-- react-text: 81 -->Maintain Context While Changing Views<!-- /react-text --></a></li><li data-reactid="82"><a href="#Explain-What-Just-Happened" data-reactid="83"><!-- react-text: 84 -->Explain What Just Happened<!-- /react-text --></a></li><li data-reactid="85"><a href="#Improve-Perceived-Performance" data-reactid="86"><!-- react-text: 87 -->Improve Perceived Performance<!-- /react-text --></a></li><li data-reactid="88"><a href="#Natural-Motion" data-reactid="89"><!-- react-text: 90 -->Natural Motion<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="91"><h2 id="Maintain-Context-While-Changing-Views" data-reactid="92"><span data-reactid="93"><!-- react-text: 94 -->Maintain Context While Changing Views<!-- /react-text --></span><a href="#Maintain-Context-While-Changing-Views" class="anchor" data-reactid="95">#</a></h2><div class="preview-image-box transition-video-player" data-reactid="96"><div class="preview-image-wrapper" data-reactid="97"><section style="position:relative;" data-reactid="98"><video src="https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="99"></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="100"><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="101"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="102"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="103"></path></svg></section></section></div><div class="preview-image-title" data-reactid="104">example of Slide In and Slide Out
</div><div class="preview-image-description" data-reactid="105"></div></div><p data-reactid="106"><!-- react-text: 107 -->Slide In and Slide Out: Create an illusion of virtual space.<!-- /react-text --></p><p data-reactid="108"><br data-reactid="109"/></p><div class="preview-image-box transition-video-player" data-reactid="110"><div class="preview-image-wrapper" data-reactid="111"><section style="position:relative;" data-reactid="112"><video src="https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="113"></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="114"><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="115"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="116"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="117"></path></svg></section></section></div><div class="preview-image-title" data-reactid="118">example of Carousel</div><div class="preview-image-description" data-reactid="119"></div></div><p data-reactid="120"><!-- react-text: 121 -->Carousel: Carousels are great for extending virtual space.<!-- /react-text --></p><p data-reactid="122"><br data-reactid="123"/></p><div class="preview-image-box transition-video-player" data-reactid="124"><div class="preview-image-wrapper" data-reactid="125"><section style="position:relative;" data-reactid="126"><video src="https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="127"></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="128"><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="129"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="130"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="131"></path></svg></section></section></div><div class="preview-image-title" data-reactid="132">example of Accordion</div><div class="preview-image-description" data-reactid="133"></div></div><p data-reactid="134"><!-- react-text: 135 -->Accordion: Accordion helps maintain context while switching views.<!-- /react-text --></p><p data-reactid="136"><br data-reactid="137"/></p><p data-reactid="138"><span class="waiting" data-reactid="139"><!-- react-text: 140 -->View Navigation (coming soon)<!-- /react-text --></span></p><p data-reactid="141"><br data-reactid="142"/></p><hr data-reactid="143"/><h2 id="Explain-What-Just-Happened" data-reactid="144"><span data-reactid="145"><!-- react-text: 146 -->Explain What Just Happened<!-- /react-text --></span><a href="#Explain-What-Just-Happened" class="anchor" data-reactid="147">#</a></h2><div class="preview-image-box transition-video-player" data-reactid="148"><div class="preview-image-wrapper" data-reactid="149"><section style="position:relative;" data-reactid="150"><video src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="151"></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="152"><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="153"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="154"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="155"></path></svg></section></section></div><div class="preview-image-title" data-reactid="156">example of Adding an Object</div><div class="preview-image-description" data-reactid="157">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="158"><!-- react-text: 159 -->Adding an Object: Add an object in the table or chart.<!-- /react-text --></p><p data-reactid="160"><br data-reactid="161"/></p><div class="preview-image-box transition-video-player" data-reactid="162"><div class="preview-image-wrapper" data-reactid="163"><section style="position:relative;" data-reactid="164"><video src="https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="165"></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="166"><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="167"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="168"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="169"></path></svg></section></section></div><div class="preview-image-title" data-reactid="170">example of Deleting Objects</div><div class="preview-image-description" data-reactid="171"></div></div><p data-reactid="172"><!-- react-text: 173 -->Deleting an Object: Delete an object in the table or chart.<!-- /react-text --></p><p data-reactid="174"><br data-reactid="175"/></p><div class="preview-image-box transition-video-player" data-reactid="176"><div class="preview-image-wrapper" data-reactid="177"><section style="position:relative;" data-reactid="178"><video src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="179"></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="180"><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="181"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="182"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="183"></path></svg></section></section></div><div class="preview-image-title" data-reactid="184">example of Modifying an object</div><div class="preview-image-description" data-reactid="185">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="186"><!-- react-text: 187 -->Modifying an Object: Modify an object in the table or chart.<!-- /react-text --></p><p data-reactid="188"><br data-reactid="189"/></p><div class="preview-image-box transition-video-player" data-reactid="190"><div class="preview-image-wrapper" data-reactid="191"><section style="position:relative;" data-reactid="192"><video src="https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4" type="video/mp4" loop="" style="width:100%;" data-reactid="193"></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="194"><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="195"><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="196"></path><path d="M20 15L20 45L45 30Z" fill="#999" style="transform-origin:30px 30px;" data-reactid="197"></path></svg></section></section></div><div class="preview-image-title" data-reactid="198">example of Calling out an Object</div><div class="preview-image-description" data-reactid="199"></div></div><p data-reactid="200"><!-- react-text: 201 -->Calling out an Object: Click the page element and call out a new object.<!-- /react-text --></p><hr data-reactid="202"/><h2 id="Improve-Perceived-Performance" data-reactid="203"><span data-reactid="204"><!-- react-text: 205 -->Improve Perceived Performance<!-- /react-text --></span><a href="#Improve-Perceived-Performance" class="anchor" data-reactid="206">#</a></h2><p data-reactid="207"><!-- react-text: 208 -->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="209"><br data-reactid="210"/></p><p data-reactid="211"><span class="waiting" data-reactid="212"><!-- react-text: 213 -->Image (coming soon)<!-- /react-text --></span></p><hr data-reactid="214"/><h2 id="Natural-Motion" data-reactid="215"><span data-reactid="216"><!-- react-text: 217 -->Natural Motion<!-- /react-text --></span><a href="#Natural-Motion" class="anchor" data-reactid="218">#</a></h2><p data-reactid="219"><!-- react-text: 220 -->Please refer to <!-- /react-text --><a href="http://motion.ant.design/#/language/" data-reactid="221"><!-- react-text: 222 -->Ant Motion, a motion language<!-- /react-text --></a><!-- react-text: 223 -->。<!-- /react-text --></p></section></article></div></div><div class="ant-row" data-reactid="224"><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="225"><section class="prev-next-nav" data-reactid="226"><a class="prev-page" href="docs/spec/invitation" data-reactid="227">Provide an Invitation</a><a class="next-page" href="docs/spec/reaction" data-reactid="228">React Immediately</a></section></div></div></div><footer id="footer" data-reactid="229"><ul data-reactid="230"><li data-reactid="231"><h2 data-reactid="232">GitHub</h2><div data-reactid="233"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="234"><span data-reactid="235">Repository</span></a></div><div data-reactid="236"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="237">dva</a><!-- react-text: 238 --> - <!-- /react-text --><span data-reactid="239">Framework</span></div><div data-reactid="240"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="241">dva-cli</a><!-- react-text: 242 --> -<!-- /react-text --><span data-reactid="243">Scaffold</span></div><div data-reactid="244"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="245">ant-tool</a><!-- react-text: 246 --> - <!-- /react-text --><span data-reactid="247">Developer Tools</span></div></li><li data-reactid="248"><h2 data-reactid="249"><span data-reactid="250">Links</span></h2><div data-reactid="251"><a href="http://mobile.ant.design" data-reactid="252">Ant Design Mobile</a><span data-reactid="253"> - </span><span data-reactid="254">Mobile</span></div><div data-reactid="255"><a href="https://g2.alipay.com/" data-reactid="256">G2</a><span data-reactid="257"> - </span><span data-reactid="258">Data Visualization</span></div><div data-reactid="259"><a href="https://antv.alipay.com/" data-reactid="260">AntV</a><span data-reactid="261"> - </span><span data-reactid="262">Data Visualization Specification</span></div><div data-reactid="263"><a href="http://motion.ant.design" data-reactid="264">Ant Motion</a><span data-reactid="265"> - </span><span data-reactid="266">Motion</span></div><div data-reactid="267"><a href="http://library.ant.design/" data-reactid="268">AntD Library</a><span data-reactid="269"> - </span><span data-reactid="270">Axure library of Ant Design</span></div><div data-reactid="271"><a href="http://ux.ant.design" data-reactid="272">Ant UX</a><span data-reactid="273"> - </span><span data-reactid="274">Sitemap Template</span></div></li><li data-reactid="275"><h2 data-reactid="276"><span data-reactid="277">Community</span></h2><div data-reactid="278"><a rel="noopener noreferrer" href="/changelog" data-reactid="279"><span data-reactid="280">Change Log</span></a></div><div data-reactid="281"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="282"><span data-reactid="283">Feedback</span></a></div><div data-reactid="284"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="285"><span data-reactid="286">Chat Room</span></a></div><div data-reactid="287"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="288"><span data-reactid="289">Bug Report</span></a></div></li><li data-reactid="290"><div data-reactid="291"><!-- react-text: 292 -->©2016 <!-- /react-text --><span data-reactid="293">Created by Ant UED</span></div><div data-reactid="294"><!-- react-text: 295 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="296">BiSheng</a></div><div style="margin-top:10px;" data-reactid="297"><span data-reactid="298">Version: </span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="299"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="300"><div class="ant-select-selection__rendered" data-reactid="301"><div class="ant-select-selection-selected-value" title="1.11.4" style="display:block;opacity:1;" data-reactid="302">1.11.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="303"><b data-reactid="304"></b></span></div></div></div></li></ul></footer></div>
</div>
<div class="ant-site-loading" id="ant-site-loading">
<img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg'/>
<div id="loading-text">One Design Language</div>
</div>
<script>
(function () {
var content = document.getElementById('loading-text');
if (content) {
content.innerHTML = content.innerHTML.split('').map(function (letter, i) {
var className;
if (i > 0 && i < content.innerText.length - 1) {
className = 'yoyo-x-' + (i % 6);
}
if (letter.trim() === '') {
className += ' blank';
}
return '<span class="' + className + '">' + letter + '</span>';
}).join('');
}
})();
// 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>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink