CODEWITHSUNDEEP
cssreactjsmaterial-ui
Laczkó Örs
Laczkó Örs

Reputation: 1118

Material-UI FAB animation between icon and extended variant

Suppose I have a Material-UI FAB that's code looks like this:

  <Fab size="medium" color="primary" aria-label="add">
          <AddIcon />
  </Fab>

I have a controlled way to toggle between this other state:

     <Fab
      variant="extended"
      size="medium"
      color="primary"
      aria-label="add"
      >
      <NavigationIcon/>
      Extended
    </Fab>

My question is how do I achieve some kind of animation between these two states? I'm thinking of a way when the FAB expands, instead of suddenly displaying the text. I can't figure it out, any help is appreciated.

Upvotes: 1

Views: 1197

Answers (2)

Reginaldo Costa
Reginaldo Costa

Reputation: 879

One possible solution could be using the Collapse from Transition along with collapsedSize prop

    <Fab
      onClick={handleOnClick}
      onMouseEnter={handleHover}
      onMouseLeave={handleLeave}
      variant="extended"
      sx={{ padding: !hoverFab ? 0 : "8px 16px"}}
    >
      <Collapse in={hoverFab} orientation='horizontal' collapsedSize={24} exit={true}>
        <div style={{display: "flex", gap: "8px"}}>
          <div style={{width: 24, height: 24}}>
            AddIcon />
          </div>
          <div>
            <Grow in={hoverFab}>
              <Typography textTransform="initial" noWrap color="#002786">
                Fab text
              </Typography>
            </Grow>
          </div>
        </div>
      </Collapse>
    </Fab>

Upvotes: 2

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

You could use MUI Transitions for example a Zoom animation. So your code becomes:

<Zoom
   in={checked} //<-- checked is a bool that you should set to true when this Fab is active
>
   <Fab size="medium" color="primary" aria-label="add">
      <AddIcon />
   </Fab>
</Zoom>

And the same thing for the other Fab.

Upvotes: 2

Related Questions