OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

fix OutfitPreview fade out bug

Browse source 
Oops, when switching to @emotion/react, it turns out they no longer support that cute hack I was doing to append suffixes to class names!

Here, I change strategy and let `CSSTransition` apply the plain `exit` and `exit-active` classes to its children, and apply Emotion styles to the child to check for _also_ having those classes.
This commit is contained in:
Emi Matchu 2021-01-07 00:33:51 -08:00
parent cdf2c66686
commit 3804457839
1 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/app/components/OutfitPreview.js
View file

@ -100,7 +100,6 @@ export function OutfitLayers({
loadingDelayMs = 500, loadingDelayMs = 500,
spinnerVariant = "overlay", spinnerVariant = "overlay",
doTransitions = false, doTransitions = false,
onChangeHasAnimations = null,
isPaused = true, isPaused = true,
}) { }) {
const containerRef = React.useRef(null); const containerRef = React.useRef(null);
@ -177,19 +176,22 @@ export function OutfitLayers({
// We manage the fade-in and fade-out separately! The fade-out // We manage the fade-in and fade-out separately! The fade-out
// happens here, when the layer exits the DOM. // happens here, when the layer exits the DOM.
key={layer.id} key={layer.id}
classNames={css` timeout={200}
&-exit { >
<FadeInOnLoad
as={FullScreenCenter}
zIndex={layer.zone.depth}
className={css`
&.exit {
opacity: 1; opacity: 1;
} }
&-exit-active { &.exit-active {
opacity: 0; opacity: 0;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
`} `}
timeout={200}
> >
<FadeInOnLoad as={FullScreenCenter} zIndex={layer.zone.depth}>
{layer.canvasMovieLibraryUrl ? ( {layer.canvasMovieLibraryUrl ? (
<OutfitMovieLayer <OutfitMovieLayer
libraryUrl={layer.canvasMovieLibraryUrl} libraryUrl={layer.canvasMovieLibraryUrl}