You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/styles/transitions.md
+17-6
Original file line number
Diff line number
Diff line change
@@ -27,18 +27,27 @@ whose `afterOpen` and `beforeClose` classes have not been set via the
27
27
the above class names and pass an object to your modal's `className` prop as
28
28
described in the [previous section](classes.md).
29
29
30
-
In order for the close transition to take effect, you will also need to pass
31
-
the `closeTimeoutMS={150}` prop to each of your modals.
30
+
In order for the fade transition to work, you need to inform the `<Modal />` about the transition time required for the animation.
32
31
33
-
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.
32
+
Like this
33
+
34
+
```javascript
35
+
<Modal closeTimeoutMS={2000} />
36
+
```
37
+
38
+
`closeTimeoutMS` is expressed in milliseconds.
39
+
40
+
The `closeTimeoutMS` value and the value used in CSS or `style` prop passed to `<Modal />` needs to be the same.
41
+
42
+
Warning: if you are using **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.
34
43
35
44
Do not conditionally render the `<Modal />`.
36
45
37
46
Instead of this
38
47
39
48
```javascript
40
49
{
41
-
this.state.showModal?
50
+
this.state.showModal&&
42
51
<Modal
43
52
closeTimeoutMS={200}
44
53
isOpen
@@ -47,7 +56,6 @@ Instead of this
47
56
>
48
57
<h2>Add modal content here</h2>
49
58
</Modal>
50
-
:null
51
59
}
52
60
```
53
61
@@ -63,6 +71,9 @@ Instead of this
63
71
>
64
72
<h2>Add modal content here</h2>
65
73
</Modal>
66
-
:null
67
74
}
68
75
```
76
+
77
+
React Modal has adopted the [stable Portal API](https://reactjs.org/docs/portals.html) API as exposed in React 16.
78
+
79
+
And `createProtal` API from React 16 [no longer allow](https://github.com/facebook/react/issues/10826#issuecomment-355719729) developers to intervene the unmounting of the portal component.
0 commit comments