Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Um/fix collapse animation #2911

Merged
merged 2 commits into from
Sep 7, 2018
Merged

Um/fix collapse animation #2911

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e6b4a50
fixes collapse opening animation on first open
odusseys Sep 6, 2018
5a3658d
fix documentation
odusseys Sep 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 21 additions & 10 deletions packages/core/src/components/collapse/collapse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export interface ICollapseState {

export enum AnimationStates {
CLOSED,
OPEN_START,
OPENING,
OPEN,
CLOSING_START,
Expand All @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
Expand All @@ -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.
*/
Expand All @@ -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) {
Expand All @@ -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);
}
}
}
Expand Down Expand Up @@ -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({
Expand All @@ -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) => {
Expand Down