diff --git a/docs/styles/transitions.md b/docs/styles/transitions.md index 889e33fe..6c2682d1 100644 --- a/docs/styles/transitions.md +++ b/docs/styles/transitions.md @@ -20,11 +20,49 @@ and fade out when it is closed: } ``` -In order for the close transition to take effect, you will also need to pass -the `closeTimeoutMS={150}` prop to each of your modals. The above example will apply the fade transition globally, affecting all modals whose `afterOpen` and `beforeClose` classes have not been set via the `className` prop. To apply the transition to one modal only, you can change the above class names and pass an object to your modal's `className` prop as described in the [previous section](classes.md). + +In order for the close transition to take effect, you will also need to pass +the `closeTimeoutMS={150}` prop to each of your modals. + +Also, if you are using `v3` which supports **React 16**, the close transition works [only if you use](https://github.com/reactjs/react-modal/issues/530#issuecomment-335208533) the `isOpen` prop to toggle the visibility of the modal. + +Do not conditionally render the ``. + +Instead of this + +```javascript +{ + this.state.showModal ? + this.toggleModal()} + > +

Add modal content here

+
+ : null +} +``` + +*Do this* + +```javascript +{ + this.toggleModal()} + > +

Add modal content here

+
+ : null +} +```