Skip to content

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.

}

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
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

4 participants