React-jss transition on hover

Question

I am trying to add a transition to some JSS styling. I have a hover effect targeting a sibling class (of icon) to adjust the fill color of an SVG when I have a hover event over the root class. The hover effect works properly, but I am failing to add a transition to the elements change in fill color. I haven't been able to find documentation anywhere on the correct syntax for transitions on sibling or children classes.

Here is my approach:

root: {
    position: "relative",
    textAlign: "center",
    fontSize: "13px",
    color: theme.palette.grey[400],
    padding: "10px 0",
    transition: "fill .5s ease-in-out"
    "&:hover $icon": {
      "& g": { fill: theme.palette.grey[200] }
    },
  }

I've also tried adding this way (per a stack overflow solution):

icon: {
    transition: ["fill", ".5s", "ease-in-out"],
    "& g": {
      fill: theme.palette.grey[500]
    }
  }

The hover works to trigger the fill change, but not the transition. Here is a sample of the code I have https://codesandbox.io/s/confident-mirzakhani-65y45?fontsize=14 (in NavItem.js)

Domino987 Domino987 · Accepted Answer · 2019-08-06T21:43:08

Here is the correct syntax to add a transition to an element:

transition: theme.transitions.create('fill', {
  duration: theme.transitions.duration.enteringScreen,
  ease: 'sharp'
})

This will animate a fill transition for a certain duration. You should add that to the root element and inside

"&:hover $icon": {
  "& g": { fill: theme.palette.grey[200] }
},

to provide an fade in and fade out transition like this:

root: {
    position: "relative",
    textAlign: "center",
    fontSize: "13px",
    color: theme.palette.grey[400],
    padding: "10px 0",
    transition: theme.transitions.create('fill', { // This is the fade-out transition
      duration: theme.transitions.duration.leavingScreen,
      ease: 'sharp'
    })
    "&:hover $icon": {
      "& g": {
         fill: theme.palette.grey[200],
         transition: theme.transitions.create('fill', { // This is the fade-in transition
             duration: theme.transitions.duration.enteringScreen,
             ease: 'sharp'
         })
      }
    },

}

Hope this helps.

React-jss transition on hover

1 Answers