Is it possible to delay Fade's transition?

Question

Goal: I want Fade's transition to happen after a certain time has passed (ex: 4000 milliseconds).

Here is a fragment of my code:

<Fade in timeout={{ enter: 8000 }}>
  <Box display="flex" justifyContent="center">
    <IconButton href="https://soundcloud.com/jyillamusic">
      <Soundcloud />
    </IconButton>
    <IconButton href="https://www.instagram.com/justinyum98/">
      <Instagram />
    </IconButton>
  </Box>
</Fade>

Expected result: With enter: 8000, I expect the transition to happen after 8000 milliseconds.

Actual result: The transition starts at 0 milliseconds, finishes after 8000 milliseconds.

Does Fade support delaying the Fade transition by some specified time?

(Looking at Fade's API, I assumed that duration.enteringScreen meant that it was the amount of milliseconds before the transition occurs, but I'm probably mistaken.)

Answer 1

Fade does not implement a delay feature, however you can manually handle your transition status using in.

in

Show the component; triggers the enter or exit states
type: boolean
default: false

In code you could do :

<Fade in={this.state.in} timeout={{ enter: 8000 }}>
  <Box display="flex" justifyContent="center">
    <IconButton href="https://soundcloud.com/jyillamusic">
      <Soundcloud />
    </IconButton>
    <IconButton href="https://www.instagram.com/justinyum98/">
      <Instagram />
    </IconButton>
  </Box>
</Fade>

And on display run a timeout to wait and create the delay

this.state = {
    in: false
};

setTimeout(() => {
    setState({ in: true });
}, 8000);

Answer 2

In "Components > Transitions > Zoom demo" of Material UI doc there are some examples in order to achieve it; a bit more elegant than touch the state!

In esence, you can pass a style attribute to Fade component and set the delay (transitionDelay). In the code below we iterate a result array and causes each individual element be showed with a 100ms delay from previous.

 {profileItems.map((pi, index) => (
    <Fade in={profileItems.length > 0}
          timeout={{ enter: 500, exit: 250 }}
          style={{ transitionDelay: `${index * 100}ms` }}
          key={`asi-${pi.key}-${index}`}>
       <span>
         <DisplayItem profileItem={pi} />
       </span>
   </Fade>))}

Answer 3

To piggyback off of sebastienbarbier, you could create a custom transition component that will handle the state for you by simply passing a delay prop.

Here is what the component would look like (I added additional useful props):

const MyFade = ({
   children,
   in: In = true,
   timeout = 1000,
   delay = 0
}) => {
   const [isIn, setIsIn] = useState(In && delay === 0)

   useEffect(() => {
      if (delay > 0) {
         setTimeout(() => setIsIn(true), delay)
      }
   })

   return (
      <Fade in={isIn} timeout={timeout}>
         {children}
      </Fade>
   )
}

And then for your specific issue to have it wait 4000ms:

<MyFade in timeout={{ enter: 8000 }} delay={4000}>
  <Box display="flex" justifyContent="center">
    <IconButton href="https://soundcloud.com/jyillamusic">
      <Soundcloud />
    </IconButton>
    <IconButton href="https://www.instagram.com/justinyum98/">
      <Instagram />
    </IconButton>
  </Box>
</MyFade>

Answer 4

This seem to work for me without Fade:

const [open, setOpen] = React.useState(false);

<List>
                  {[
                    'Inbox',
                    'Starred',
                    'Send email',
                    'Drafts',
                    'foo',
                    'bar',
                    'baz',
                  ].map((text, index) => (
    <ListItem
     key={text}                 
     sx={{
     transitionProperty: 'all',
                                transitionDuration: '750ms',
                                ...(open && {
                                  opacity: 1,
                                  transform: 'translateY(0)',
                                  transitionDelay: `${index * 150}ms`,
                                }),
                                ...(!open && {
                                  opacity: 0,
                                  transform: 'translateY(100%)',
                                }),
                              }}
                            >

or

<ListItem
 key={text}
 style={{ transitionDelay: open ? `${index * 150}ms` : '0ms' }}                     
>