'Add transition to MUI Chip when Delete Icon appears on hover

The overall width of the chip should increase with a smooth transition when the delete Icon appears, rather than an instant increase.

Current Code structure:

CSS:

customChip: {
"& svg": {
  position: "relative",
  display: "none",
},
"&:hover": {
  "& svg": {
    display: "block",
    opacity: 1,
  },
},

JSX:

...
const CustomDeleteIcon = (
  <Cancel/>
);
....
<Grid item key={index} className={classes.chipContainer}>
   <Chip
      size="small"
      className={classes.customChip}
      label={
        <span style={{ whiteSpace: "initial" }}>{x.i}</span>
      }
      onDelete={(event) =>
         this.handleChipDelete(event, index)
      }
      deleteIcon={CustomDeleteIcon}
  />
</Grid>

Current View

cssreactjsmaterial-ui


Solution 1:[1]

On hover, css transistion property can be used to get the desired output.

transition: all 0.5s ease;

we can also try using each properties separately as below,

transition-property: opacity;
transition-duration: 2s;

you can read more on this here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mabiyan

Related Questions