toggle code snipple

static/code.jsx

@@ -19,7 +19,7 @@ var CodeBox = React.createClass({
     if (!$(e.target).hasClass('collapse')) {
       return;
     }
-    $(e.target).parent().parent().find('.highlight').toggle();
+    $(e.target).parent().parent().find('.highlight').slideToggle(150);
   },
   render: function() {
     var html = this.state.html;

static/script.js

@@ -1,5 +1,7 @@
 $(function() {
 
-  // code here
+  $('.component-demos .icon-all').on('click', function() {
+    $('.code-box').find('.highlight').slideToggle(150);
+  });
 
 });

static/style.css

@@ -36,8 +36,7 @@ li {
 a {
   color: #6EB4E0;
   text-decoration: none;
-  transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-  -webkit-transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1);
+  transition: color .3s ease;
 }
 a:hover {
   color: #6EB4E0;
@@ -61,7 +60,6 @@ header {
   height: 46px;
   margin: 20px 30px;
   transition: margin .3s cubic-bezier(0.075, 0.82, 0.165, 1), width .3s cubic-bezier(0.075, 0.82, 0.165, 1), height .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-  -webkit-transition: margin .3s cubic-bezier(0.075, 0.82, 0.165, 1), width .3s cubic-bezier(0.075, 0.82, 0.165, 1), height .3s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 .search {
   float: left;
@@ -78,7 +76,6 @@ header {
   height: 22px;
   padding: 0 0 0 20px;
   color: #999;
-  -webkit-transition: padding .3s cubic-bezier(0.075, 0.82, 0.165, 1);
   transition: padding .3s cubic-bezier(0.075, 0.82, 0.165, 1);
   font-size: 14px;
 }
@@ -107,7 +104,6 @@ header {
   left: 30px;
   cursor: pointer;
   transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-  -webkit-transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 .search button:before,
 .search button:after {
@@ -158,8 +154,6 @@ header {
   width: 100%;
   height: 100%;
   display: block;
-  -webkit-transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-  transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 .nav ul li.current a {
   color: #71B5DE;
@@ -176,7 +170,6 @@ header {
   left: 0;
   background: #6EB4E0;
   transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-  -webkit-transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 .nav-phone-icon {
   display: none;
@@ -203,7 +196,6 @@ header {
   min-height: calc(100% - 217px);
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
-  -webkit-transition: -webkit-transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out;
   transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out;
 }
 .banner-box {
@@ -971,6 +963,20 @@ footer ul li > a {
   font-weight: normal;
 }
 
+.component-demos .icon-all {
+  cursor: pointer;
+  font-size: 16px;
+  color: #9199AC;
+  margin-left: 5px;
+  vertical-align: text-bottom;
+  opacity: 0.8;
+  transition: all 0.3s ease;
+}
+
+.component-demos .icon-all:hover {
+  opacity: 1;
+}
+
 .code-boxes {
   -webkit-column-count: 2;
   -moz-column-count: 2;

theme/templates/layout.html

@@ -9,7 +9,7 @@
   <title>{% block title %}Ant Design{% endblock %}</title>
   <link rel="stylesheet" href="/static/normalize.css">
   <link rel="stylesheet" href="/static/style.css">
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_1431763241_3066776.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_1431763644_2809389.css">
   <link rel="stylesheet" href="/static/tomorrow.css">
   <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
   <script src="/static/script.js"></script>
@@ -91,7 +91,10 @@
         </h1>
         {{ post.html }}
         {%- if post.meta.template === 'component' %}
-        <h2>组件演示</h2>
+        <h2 class="component-demos">
+          组件演示
+          <i class="iconfont icon-all" title="展开全部代码"></i>
+        </h2>
         <div id="code-boxes">
           代码加载中...
         </div>