site: add demo preview animation

site/common/styles/demo.less

@@ -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 {

site/component/Demo/index.jsx

@@ -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>
     );
   }