React-modal: Is it possible to create css3 animation using this library ?.
Summary:
I really like theses modal for their Effects: http://xue2han.github.io/react-dynamic-modal/
An effect look like this :
export const ScaleUp = {
transition : {
property : 'all',
duration : 300,
timingfunction : 'linear'
},
begin : {
'transform': 'scale(0.7)',
'opacity': 0
},
end : {
'transform': 'scale(1)',
'opacity': 1
}
}
It provides animation, unfortunately, the way it is made doesn't work well with styled-components context.
Is it possible using react-modal to have that kind of result?
kopax
All 15 comments
@kopax [edited] sorry, i didn't pay attention to the styled-components part :). the way it's done in react-modal is by controlling the animation with ReactModal_after-open and ReactModal_before-close. To get the before close correctly, the duration must match with the closeTimeoutMS.
diasbruno
on 2 Mar 2017
Thanks for the short explanation, it makes sens.
Regarding the styled-components part :
React doesn't allow you to write css in js while styled-components does. You can pass a theme to the context of all your components if you use as a wrapper a <ThemeProvider theme={theme}>
This is how my Virtual DOM looks like :
const render = (messages) => {
ReactDOM.render(
<Provider store={store}>
<LanguageProvider messages={messages}>
<ThemeProvider theme={theme}>
<Router
history={history}
routes={rootRoute}
onUpdate={hashLinkScroll}
render={
applyRouterMiddleware(useScroll())
}
/>
</ThemeProvider>
</LanguageProvider>
</Provider>,
document.getElementById('app')
);
};
Problem I have with react-dynamic-modal was that it inject it's modal as a brother of <Provider> and not inside <ThemeProvider> which provide the context so it will lost it's context and ability to get customized using the theme provided.
These are my two requirement :
- injected under
<App>(which is the 1st child of<Router>in my virtual dom, and first component child of<body>in the dom) - being able to apply a modal with and without css3 effect.
@diasbruno, would it be possible to see an example incl css3 effect (2) so I can see if (1) can do it?
kopax
on 2 Mar 2017
I am struggling in order to get the same animation as in Bootstrap.
I can't get any animation at all, does anyone has an example of __react-modal__ that involve transitions ?
kopax
on 6 Mar 2017
Here is a fade in animation for the wrapper in scss:
.ReactModal__Overlay {
transition: opacity 500ms ease-in-out;
opacity: 0;
&--after-open {
opacity: 1;
}
&--before-close {
opacity: 0;
}
}
And here is a 'fade in up' animation for the modal itself.
.ReactModal__Content {
transition: all 500ms ease-in-out;
transform: translateY(30px);
opacity: 0;
&--after-open {
opacity: 1;
transform: translateY(0);
}
&--before-close {
opacity: 0;
transform: translateY(30px);
}
}
nckblu
on 7 Mar 2017
Thanks. That would have been helpful when I was still trying but I've now decided to use a different modal. I think this should be an example in the documentation for the others.
kopax
on 8 Mar 2017
Good point @kopax I'll make a PR at some point this week.
nckblu
on 8 Mar 2017
It seems like ReactModal__Overlay--after-open class is added directly on opening. Which makes animation impossible (the styles are added straight away as the element is appended to the DOM already with the class on).
Is it only me having this issue?
Grsmto
on 13 Apr 2017
I could get the opacity animation working with styled-components by injecting the style globally and setting the closeTimeoutMS property on the Modal.
However, the scale animation won't work, because I'm already overriding the content with custom styles including transform: 'translate(-50%, -50%)', to centre it. 馃
kadikraman
on 14 May 2017
@Grsmto have you tried my example above? The issue you describe can be avoided by using a transition on the class if I understand correctly. If you post your code we can have a look.
nckblu
on 15 May 2017
@kadikraman, you can apply multiple transforms to include the translation and scale:
http://stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css
nckblu
on 15 May 2017
@nckblu True, but because of the transform: 'translate(-50%, -50%)', instead of looking like the modal is "scaling from below", it ends up looking like it's "scaling from the right" if that makes sense
kadikraman
on 15 May 2017
@kadikraman ahh I see, that's annoying, perhaps you could center using absolute positioning way instead?
nckblu
on 15 May 2017
@Grsmto I also had this issue... Fixed by setting the transition to 'all' like so: transition: all 1000ms ease-in-out
Not sure why that worked, but it did...
nlieb
on 23 Jun 2017
@Grsmto and @nckblu I also gave it a try, this worked for me:
.ReactModal__Overlay {
background-color: rebeccapurple;
opacity: 0;
}
.ReactModal__Overlay--after-open {
opacity: 1;
transition: opacity 200ms ease-in-out;
}
.ReactModal__Overlay--before-close {
opacity: 0;
}
Notice that the difference from @nckblu code is that the transition property is set on the --after-open class.
Also closeTimeoutMS should be configured to match the transitions ms as mentioned above.
sobi100
on 16 Aug 2017
Would there be any interesting building this into the API? A new prop named easeTransitionTimeMs (or something) which sets this specific CSS?
I think having a ease transition is common enough to have it be a part of the API. Otherwise, having to override the classes for every modal where we want this transition is kind of a pain... although most often you'd have the override only once and apply it to all modals in the application.
I hacked together a quick branch on my fork to test it out. Seemed easy enough: https://github.com/jseminck/react-modal/commit/b929882ca9d0292f075d24e985048da5b3ca76d2
If there's interest in it I can make a PR out of it (it would still need docs, tests, etc...)
jseminck
on 24 Aug 2017
Related issues
CXJoyce
路
4Comments
petertdinh
路
4Comments
shaun-sweet
路
3Comments
emwee
路
4Comments
sizeight
路
3Comments
Most helpful comment
Here is a fade in animation for the wrapper in scss:
And here is a 'fade in up' animation for the modal itself.