Um/fix collapse animation (#2911)

* fixes collapse opening animation on first open

* fix documentation

packages/core/src/components/collapse/collapse.tsx

@@ -50,6 +50,7 @@ export interface ICollapseState {
 
 export enum AnimationStates {
  CLOSED,
+ OPEN_START,
  OPENING,
  OPEN,
  CLOSING_START,
@@ -65,7 +66,13 @@ export enum AnimationStates {
  * OPEN
  * When in this state, the collapse height is set to auto, and the body Y is set to 0 (so the element can be seen
  * as normal).
+ * 
+ * OPEN START
+ * When in this state, the body is re-rendered, height is set to the measured body height and the body Y is set to 0.
  *
+ * OPENING
+ * Animation begins, height is set to auto. This is all animated, and on complete, the state changes to OPEN.
+ * 
  * CLOSING_START
  * When in this state, height has been changed from auto to the measured height of the body to prepare for the
  * closing animation in CLOSING_END.
@@ -74,12 +81,11 @@ export enum AnimationStates {
  * When in this state, the height is set to 0 and the body Y is at -height. Both of these properties are transformed,
  * and then after the animation is complete, the state changes to CLOSED.
  *
- * OPENING
- * When in this state, the body is re-rendered, height is set to the measured body height and the body Y is set to 0.
- * This is all animated, and on complete, the state changes to OPEN.
+
+
  *
  * When changing the isOpen prop, the following happens to the states:
- * isOpen = true : CLOSED -> OPENING -> OPEN
+ * isOpen = true : CLOSED -> OPEN_START -> OPENING -> OPEN
  * isOpen = false: OPEN -> CLOSING_START -> CLOSING_END -> CLOSED
  * These are all animated.
  */
@@ -104,9 +110,6 @@ export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseSta
  private height: number = 0;
 
  public componentWillReceiveProps(nextProps: ICollapseProps) {
- if (this.contents != null && this.contents.clientHeight !== 0) {
- this.height = this.contents.clientHeight;
- }
  if (this.props.isOpen !== nextProps.isOpen) {
  this.clearTimeouts();
  if (this.state.animationState !== AnimationStates.CLOSED && !nextProps.isOpen) {
@@ -116,10 +119,8 @@ export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseSta
  });
  } else if (this.state.animationState !== AnimationStates.OPEN && nextProps.isOpen) {
  this.setState({
- animationState: AnimationStates.OPENING,
- height: `${this.height}px`,
+ animationState: AnimationStates.OPEN_START,
  });
- this.setTimeout(() => this.onDelayedStateChange(), this.props.transitionDuration);
  }
  }
  }
@@ -168,6 +169,9 @@ export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseSta
  }
 
  public componentDidUpdate() {
+ if (this.contents != null && this.contents.clientHeight !== 0) {
+ this.height = this.contents.clientHeight;
+ }
  if (this.state.animationState === AnimationStates.CLOSING_START) {
  this.setTimeout(() =>
  this.setState({
@@ -177,6 +181,13 @@ export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseSta
  );
  this.setTimeout(() => this.onDelayedStateChange(), this.props.transitionDuration);
  }
+ if (this.state.animationState === AnimationStates.OPEN_START) {
+ this.setState({
+ animationState: AnimationStates.OPENING,
+ height: this.height + "px",
+ });
+ this.setTimeout(() => this.onDelayedStateChange(), this.props.transitionDuration);
+ }
  }
 
  private contentsRefHandler = (el: HTMLElement) => {