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

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

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