如何在div或stack (chakra ui)的悬停上应用过渡

Question

为什么在mouseenter和mouseleave上不应用过渡?栈在鼠标进入时达到-10px但是过渡不起作用

这里的代码是:

const Card = () => {

const [isHovering, setHovering] = useState('')

function handleMouseEnter() {

setHovering(true)

}
function handleMouseLeave() {

setHovering(false)

}


return (

<Stack
style={{
position: 'relative',
top: 0,
top: isHovering ? '-10px' : '',
transition: isHovering ? 'top ease 0.5s' : ''

}}
onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} >
</Stack>
}

Answer 1

因为您在鼠标离开transition: isHovering ? 'top ease 0.5s' : ''时删除了过渡，所以请尝试

style={{
position: 'relative',
top: isHovering ? '-10px' : '0px',
transition: 'top ease 0.5s',
}}