Suggest wrapping Collapse child in no-margin node

It makes a big difference when you have elements with margin or padding;
the animation appears much smoother when the contents are enclosed
in a node with zero padding and zero margin (like a raw `<div>`).

Here are two examples.
  * with a div: https://cloud.githubusercontent.com/assets/4317806/10871987/4bf4ea48-80ac-11e5-84f5-45c955a22f47.gif
  * without a div: https://cloud.githubusercontent.com/assets/4317806/10871988/504aee62-80ac-11e5-9232-7dc97c151fef.gif
(source: wchargin/lc3@344da3a)

The example already wraps its contents in a `<div>`,
but it's not clear that or why this is beneficial.

Author: wchargin

docs/src/ComponentsPage.js

@@ -952,6 +952,20 @@ const ComponentsPage = React.createClass({
 
                   <h3><Anchor id="utilities-collapse">Collapse</Anchor></h3>
                   <p>Add a collapse toggle animation to an element or component.</p>
+                  <div className="bs-callout bs-callout-info">
+                    <h4>Smoothing animations</h4>
+                    <p>
+                      If you're noticing choppy animations,
+                      and the component that's being collapsed
+                      has non-zero margin or padding,
+                      try wrapping the contents
+                      of your <code>&lt;Collapse&gt;</code>
+                      {" "}inside a node with no margin or padding,
+                      like the <code>&lt;div&gt;</code> in the example below.
+                      This will allow the height to be computed properly,
+                      so the animation can proceed smoothly.
+                    </p>
+                  </div>
                   <ReactPlayground codeText={Samples.Collapse} />
 
                   <h4><Anchor id="utilities-collapse-props">Props</Anchor></h4>