From c51dbb2c8808152bd125ba0c923fef17e23c0c9a Mon Sep 17 00:00:00 2001 From: Sean Date: Tue, 20 Sep 2022 18:01:53 -0700 Subject: [PATCH 1/6] Add overlay/content example --- docs/styles/transitions.md | 71 +++++++++++++++++++++++++++++++++++--- 1 file changed, 67 insertions(+), 4 deletions(-) diff --git a/docs/styles/transitions.md b/docs/styles/transitions.md index 7e2f6615..d2026bd8 100644 --- a/docs/styles/transitions.md +++ b/docs/styles/transitions.md @@ -1,7 +1,10 @@ Using [CSS classes](classes.md), it is possible to implement transitions for -when the modal is opened or closed. By placing the following CSS somewhere in -your project's styles, you can make the modal content fade in when it is opened -and fade out when it is closed: +when the modal is opened or closed. + +#### Basic overlay styling + +By placing the following CSS somewhere in your project's styles, you can make the +modal content fade in when it is opened and fade out when it is closed: ```css .ReactModal__Overlay { @@ -18,13 +21,14 @@ and fade out when it is closed: } ``` - 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). +#### Gracefully closing the modal + In order for the fade transition to work, you need to inform the `` about the transition time required for the animation. Like this @@ -72,6 +76,65 @@ Instead of this } ``` +#### Styling the overlay and content + +It is possible to independently style the transitions for the modal +overlay and modal content. The example below will fade the overlay +in and slide the modal content on-screen from the bottom of the page: + +```javascript +{ + this.toggleModal()} + > +

Add modal content here

+ +} +``` + +Corresponding CSS: + +```css +.ReactModal__Overlay { + opacity: 0; + transition: opacity 800ms ease-in-out; +} + +.ReactModal__Overlay--after-open{ + opacity: 1; +} + +.ReactModal__Overlay--before-close{ + opacity: 0; +} + +.ReactModal__Content { + transform: translate(-50%, 150%); + transition: transform 800ms ease-in-out; +} + +.ReactModal__Content--after-open { + transform: translate(-50%, -50%); +} + +.ReactModal__Content--before-close { + transform: translate(-50%, 150%); +} +``` + +#### Notes + React Modal has adopted the [stable Portal API](https://reactjs.org/docs/portals.html) as exposed in React 16. 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. From af2b9d10ddabdf359c062e80de6f1281b82e8e79 Mon Sep 17 00:00:00 2001 From: Sean Date: Tue, 20 Sep 2022 18:18:42 -0700 Subject: [PATCH 2/6] Use default styles; highlight issue with transform --- docs/styles/transitions.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/styles/transitions.md b/docs/styles/transitions.md index d2026bd8..574c2c6e 100644 --- a/docs/styles/transitions.md +++ b/docs/styles/transitions.md @@ -88,9 +88,12 @@ in and slide the modal content on-screen from the bottom of the page: style={{ overlay: { background: 'rgba(0, 0, 0, 0.3)' }, content: { - position: 'fixed', - left: '50%', top: '50%', + left: '50%', + right: 'auto', + bottom: 'auto', + marginRight: '-50%', + // transform: 'translate(-50%, -50%)', This will override the css values if not removed }, }} closeTimeoutMS={800} From 497912e0cf6fbee8d1e65bf31ef5b355bf85403e Mon Sep 17 00:00:00 2001 From: Sean Date: Tue, 20 Sep 2022 18:31:28 -0700 Subject: [PATCH 3/6] Update docs/styles/transitions.md Co-authored-by: Bruno Dias --- docs/styles/transitions.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/styles/transitions.md b/docs/styles/transitions.md index 574c2c6e..618c4ab3 100644 --- a/docs/styles/transitions.md +++ b/docs/styles/transitions.md @@ -79,7 +79,11 @@ Instead of this #### Styling the overlay and content It is possible to independently style the transitions for the modal -overlay and modal content. The example below will fade the overlay +overlay and modal content. + +{about precendence} + +The example below will fade the overlay in and slide the modal content on-screen from the bottom of the page: ```javascript From 45232e3f1f21fce779fbb24a3a281285f457565f Mon Sep 17 00:00:00 2001 From: Sean Date: Tue, 20 Sep 2022 18:37:24 -0700 Subject: [PATCH 4/6] Clarify inline style precedence issue --- docs/styles/transitions.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/styles/transitions.md b/docs/styles/transitions.md index 618c4ab3..65801a1e 100644 --- a/docs/styles/transitions.md +++ b/docs/styles/transitions.md @@ -81,7 +81,10 @@ Instead of this It is possible to independently style the transitions for the modal overlay and modal content. -{about precendence} +Keep in mind that inline styles will take precedence over those defined +as CSS rules. If you want to apply a transition to one of the default styles, +such as `transform`, you can remove it from the inline definition and define +it instead as a CSS rule. The example below will fade the overlay in and slide the modal content on-screen from the bottom of the page: @@ -97,7 +100,7 @@ in and slide the modal content on-screen from the bottom of the page: right: 'auto', bottom: 'auto', marginRight: '-50%', - // transform: 'translate(-50%, -50%)', This will override the css values if not removed + // transform: 'translate(-50%, -50%)', }, }} closeTimeoutMS={800} From 589c7b172455942082cd60a184de222549cbdeb5 Mon Sep 17 00:00:00 2001 From: Sean Date: Tue, 20 Sep 2022 18:43:23 -0700 Subject: [PATCH 5/6] Keep note about why transform is commented out Co-authored-by: Bruno Dias --- docs/styles/transitions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/styles/transitions.md b/docs/styles/transitions.md index 65801a1e..6bfd3a6d 100644 --- a/docs/styles/transitions.md +++ b/docs/styles/transitions.md @@ -100,7 +100,7 @@ in and slide the modal content on-screen from the bottom of the page: right: 'auto', bottom: 'auto', marginRight: '-50%', - // transform: 'translate(-50%, -50%)', + // transform: 'translate(-50%, -50%)', if you use inline styles instead of css }, }} closeTimeoutMS={800} From 1038b00f502362a2f2259487761b64fb09e2abf3 Mon Sep 17 00:00:00 2001 From: Sean Date: Tue, 20 Sep 2022 18:44:26 -0700 Subject: [PATCH 6/6] Point towards !important as an alternate solution Co-authored-by: Bruno Dias --- docs/styles/transitions.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/styles/transitions.md b/docs/styles/transitions.md index 6bfd3a6d..c466e684 100644 --- a/docs/styles/transitions.md +++ b/docs/styles/transitions.md @@ -82,9 +82,7 @@ It is possible to independently style the transitions for the modal overlay and modal content. Keep in mind that inline styles will take precedence over those defined -as CSS rules. If you want to apply a transition to one of the default styles, -such as `transform`, you can remove it from the inline definition and define -it instead as a CSS rule. +as CSS rules. In case you need to use both at the same time, you'll need to use the css `!important`. The example below will fade the overlay in and slide the modal content on-screen from the bottom of the page: