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.

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

Dialog: Animate when opening and closing #530

Merged
merged 5 commits into from
Nov 11, 2016
Merged

Conversation

mikewheaton
Copy link
Contributor

Fixes #86

This PR adds a fade in animation when the Dialog is opened, and a fadeOut animation when it's closed.

animatedialog

Copy link
Member

@dzearing dzearing left a comment

Choose a reason for hiding this comment

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

Minor feedback/questions. Awesome to see this.

};
}

public componentDidMount() {
if (this.state.isOpen) {
this._async.setTimeout(() => {
Copy link
Member

Choose a reason for hiding this comment

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

possible to use onAnimationEnd event?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was copied over from Panel.tsx but it's redundant in this case. I've removed it, so we're just using onAnimationEnd now.

@@ -120,4 +166,33 @@ export class Dialog extends React.Component<IDialogProps, any> {

return groupings;
}

private _onDialogRef(ref: HTMLDivElement) {
if (ref) {
Copy link
Member

Choose a reason for hiding this comment

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

Can you use onAnimationEnd in react 15+?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Looks like the onAnimationEnd handler was added for React 15. Here's the pull request.

@mikewheaton mikewheaton merged commit 22687d5 into master Nov 11, 2016
@mikewheaton mikewheaton deleted the miwhea/animate-dialog branch November 11, 2016 04:31
gokunymbus pushed a commit to gokunymbus/office-ui-fabric-react that referenced this pull request Jan 24, 2017
* Animate the Dialog in

* Animate the Dialog out

* Remove unnecessary timeout and add clarifying comments
@microsoft microsoft locked as resolved and limited conversation to collaborators Sep 1, 2019
This pull request was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dialog: Add animations
3 participants