[英]React-jss transition on hover
I am trying to add a transition to some JSS styling. 我正在尝试向某些JSS样式添加过渡。 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. 当我在root
类上发生悬停事件时,我有一个针对同级类( icon
)的悬停效果来调整SVG的填充颜色。 The hover effect works properly, but I am failing to add a transition to the elements change in fill
color. 悬停效果正常工作,但是我无法为元素的fill
颜色变化添加过渡效果。 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
) 这是我有https://codesandbox.io/s/confident-mirzakhani-65y45?fontsize=14的代码示例(在NavItem.js
)
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. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.