Configurable animations for <Collapse>s

Expected Behavior

<Collapse>s’ animations are configurable.

Current Behavior

They were turned off completely in #3522 as a temporary fix for #3450.

Possible Solution

Could we have another parameter here — https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md#display — e.g. useAnimations :: Boolean, which would do this?

diff --git a/src/core/components/debug.jsx b/src/core/components/debug.jsx
index 382f2cac..6da3cfda 100644
--- a/src/core/components/debug.jsx
+++ b/src/core/components/debug.jsx
@@ -33,7 +33,7 @@ export default class Debug extends React.Component {
       <div className="info">
         <h3><a onClick={this.toggleJsonDump}> {this.plusOrMinus(this.state.jsonDumpOpen)} App </a></h3>

-        <Collapse isOpened={this.state.jsonDumpOpen} springConfig={presets.noWobble}>
+        <Collapse isOpened={this.state.jsonDumpOpen} springConfig={presets.noWobble} animated>

            <ObjectInspector data={getState().toJS() || {}} name="state" initialExpandedPaths={["state"]}/>

@@ -49,4 +49,3 @@ export default class Debug extends React.Component {
 Debug.propTypes = {
   getState: PropTypes.func.isRequired
 }
-
diff --git a/src/core/components/models.jsx b/src/core/components/models.jsx
index 3bbe69ee..1525f522 100644
--- a/src/core/components/models.jsx
+++ b/src/core/components/models.jsx
@@ -49,7 +49,7 @@ export default class Models extends Component {
           <use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
         </svg>
       </h4>
-      <Collapse isOpened={showModels}>
+      <Collapse isOpened={showModels} animated>
         { 
           definitions.entrySeq().map( ( [ name ])=>{

diff --git a/src/core/components/operation.jsx b/src/core/components/operation.jsx
index f04c070e..00c982d6 100644
--- a/src/core/components/operation.jsx
+++ b/src/core/components/operation.jsx
@@ -154,7 +154,7 @@ export default class Operation extends PureComponent {
             }
           </div>

-          <Collapse isOpened={isShown}>
+          <Collapse isOpened={isShown} animated>
             <div className="opblock-body">
               { (operation && operation.size) || operation === null ? null :
                 <img height={"32px"} width={"32px"} src={require("core/../img/rolling-load.svg")} className="opblock-loading-animation" />
diff --git a/src/core/components/operations.jsx b/src/core/components/operations.jsx
index 6bc4030e..9f85015f 100644
--- a/src/core/components/operations.jsx
+++ b/src/core/components/operations.jsx
@@ -115,7 +115,7 @@ export default class Operations extends React.Component {
                     </button>
                   </h4>

-                  <Collapse isOpened={showTag}>
+                  <Collapse isOpened={showTag} animated>
                     { 
                       operations.map( op => {
                         const path = op.get("path")

Context

I’m trying to accomplish more readability.

It would be a-ma-zing to get animations back. (And if someone’s using the callbacks feature for which they break (see #3450), they just won’t turn animations back on.)

Start with docs/usage/configuration.md#display and the Collapse usages in src/core/components/debug.jsx, models.jsx, operation.jsx, and operations.jsx. Review the context from #3522 and #3450 before deciding how the configuration should propagate. Done means the documented setting controls these animations while preserving the existing callback behavior.