mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 32 Packages Projects Releases Wiki Activity

site: add demo preview animation

Browse Source
This commit is contained in:
Benjy Cui 2016-03-25 17:07:00 +08:00
parent d179d05a8b
commit 41460d615a
2 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
site/common/styles/demo.less
View File

@ -120,6 +120,10 @@
word-break: break-word;
}
.code-box.expand .code-box-meta {
border-bottom: 1px dashed #e9e9e9;
}
.code-box .collapse {
position: absolute;
right: 16px;
@ -148,10 +152,24 @@
opacity: 1;
}
.code-box .highlight-wrapper {
max-height: 0;
opacity: 0;
overflow: auto;
transition: all 0.4s ease;
}
.code-box .highlight-wrapper-expand {
max-height: 500px;
opacity: 1;
}
.code-box .highlight {
overflow: hidden;
padding: 5px;
border-top: 1px dashed #e9e9e9;
&:not(:first-child) {
border-top: 1px dashed #e9e9e9;
}
}
.code-box pre {

44
site/component/Demo/index.jsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import { Link } from 'react-router';
import classNames from 'classnames';
import Animate from 'rc-animate';
import * as utils from '../utils';
export default class Demo extends React.Component {
@ -61,32 +60,27 @@ export default class Demo extends React.Component {
onClick={this.handleCodeExapnd.bind(this)}
unselectable="none" />
</section>
<Animate
transitionEnter transitionLeave>
<section className={`highlight-wrapper ${codeExpand ? 'highlight-wrapper-expand' : ''}`}
key="code">
<div className="highlight">
<pre>
<code className="javascript" dangerouslySetInnerHTML={{
__html: highlightedCode,
}} />
</pre>
</div>
{
codeExpand ?
<section key="code">
<div className="highlight">
<pre>
<code className="javascript" dangerouslySetInnerHTML={{
__html: highlightedCode,
}} />
</pre>
</div>
{
style ?
<div key="style" className="highlight">
<pre>
<code className="css" dangerouslySetInnerHTML={{
__html: highlightedStyle,
}} />
</pre>
</div> :
null
}
</section> : <div key="nothing" />
style ?
<div key="style" className="highlight">
<pre>
<code className="css" dangerouslySetInnerHTML={{
__html: highlightedStyle,
}} />
</pre>
</div> :
null
}
</Animate>
</section>
</section>
);
}