我正在尝试向某些 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
中)
最佳答案
这是向元素添加过渡的正确语法:
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'
})
}
},
希望这对您有所帮助。
关于javascript - 悬停时的 React-jss 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57383642/