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

fix fade-in for outfit loading hanger

Browse source 
Huh, maybe this is a Firefox bug or something? but the container wasn't applying partial opacity correctly to its children, it was only doing 0 or 1, I think maybe because the children weren't static? I refactor here to make the DOM structure a bit more natural, and fade ins work again 🤷‍♀️
This commit is contained in:
Emi Matchu 2020-08-31 18:57:29 -07:00
parent 41388ecb9d
commit f6b9f7f440
1 changed files with 17 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -77,8 +77,8 @@ export function OutfitLayers({
doAnimations = false, doAnimations = false,
}) { }) {
const [isMounted, setIsMounted] = React.useState(false); const [isMounted, setIsMounted] = React.useState(false);
React.useEffect(() => { React.useLayoutEffect(() => {
setTimeout(() => setIsMounted(true), 0); setIsMounted(true);
}, []); }, []);
return ( return (
@ -158,7 +158,8 @@ export function OutfitLayers({
</CSSTransition> </CSSTransition>
))} ))}
</TransitionGroup> </TransitionGroup>
<Box <FullScreenCenter
zIndex="9000"
// This is similar to our Delay util component, but Delay disappears // This is similar to our Delay util component, but Delay disappears
// immediately on load, whereas we want this to fade out smoothly. We // immediately on load, whereas we want this to fade out smoothly. We
// also delay the fade-in by 0.5s, but don't delay the fade-out at all. // also delay the fade-in by 0.5s, but don't delay the fade-out at all.
@ -169,23 +170,22 @@ export function OutfitLayers({
opacity={isMounted && loading ? 1 : 0} opacity={isMounted && loading ? 1 : 0}
transition={`opacity 0.2s ${loading ? loadingDelay : "0s"}`} transition={`opacity 0.2s ${loading ? loadingDelay : "0s"}`}
> >
<FullScreenCenter zIndex="9000"> <Box
<Box position="absolute"
width="100%" top="0"
height="100%" left="0"
backgroundColor="gray.900" right="0"
opacity="0.8" bottom="0"
/> backgroundColor="gray.900"
</FullScreenCenter> opacity="0.7"
<FullScreenCenter zIndex="9001"> />
<HangerSpinner boxSize="48px" /> <HangerSpinner boxSize="48px" />
</FullScreenCenter> </FullScreenCenter>
</Box>
</Box> </Box>
); );
} }
export function FullScreenCenter({ children, zIndex }) { export function FullScreenCenter({ children, ...otherProps }) {
return ( return (
<Flex <Flex
pos="absolute" pos="absolute"
@ -195,7 +195,7 @@ export function FullScreenCenter({ children, zIndex }) {
left="0" left="0"
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
zIndex={zIndex} {...otherProps}
> >
{children} {children}
</Flex> </Flex>