javascript - 悬停时的 React-jss 转换

Question

我正在尝试向某些 JSS 样式添加过渡。当我在 root 类上有悬停事件时，我有一个针对兄弟类(icon)的悬停效果来调整 SVG 的填充颜色。悬停效果正常工作，但我无法向 fill 颜色的元素更改添加过渡。我无法在任何地方找到有关兄弟或子类转换的正确语法的文档。

这是我的方法:

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] }
    },
  }

我也尝试过以这种方式添加(根据堆栈溢出解决方案):

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

悬停会触发填充变化，但不会触发过渡。这是我的代码示例 https://codesandbox.io/s/confident-mirzakhani-65y45?fontsize=14 (在 NavItem.js 中)

Answer 1

这是向元素添加过渡的正确语法:

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

这将在特定持续时间内为填充过渡设置动画。您应该将其添加到根元素和内部

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

提供这样的淡入和淡出过渡:

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'
         })
      }
    },

希望这对您有所帮助。