mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-23 11:46:44 +10:00
77 lines
4.1 KiB
HTML
77 lines
4.1 KiB
HTML
<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 _antd = require('antd');
|
|
|
|
ReactDOM.render(React.createElement(
|
|
_antd.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="hljs-keyword">import</span> { QueueAnim } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
|
|
|
ReactDOM.render(
|
|
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">QueueAnim</span> <span class="hljs-attribute">delay</span>=<span class="hljs-value">{500}</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"a"</span>></span>依次进场<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"b"</span>></span>依次进场<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"c"</span>></span>依次进场<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"d"</span>></span>依次进场<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"e"</span>></span>依次进场<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"f"</span>></span>依次进场<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
|
<span class="hljs-tag"></<span class="hljs-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="hljs-class">.code-box-demo</span> > <span class="hljs-tag">div</span> <span class="hljs-rules">{
|
|
<span class="hljs-rule"><span class="hljs-attribute">overflow</span>:<span class="hljs-value"> hidden</span></span>;
|
|
}</span>
|
|
|
|
<span class="hljs-class">.code-box-demo</span> <span class="hljs-class">.buttons</span> <span class="hljs-rules">{
|
|
<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
|
|
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span> auto</span></span>;
|
|
<span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-number">20px</span></span></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> |