今天在做菜单页面的滑动动画的时候 解决了一个由于黑色罩子div遮盖住菜单选项而导致无法点击的bug
大致是这样
我们使用react-spring来做为菜单的滑动动画 我们可以在组件外传一个visible进来 当visible改变就发生动画
<TopMenu visible={visible} onClickMask={() =>{setVisible(false)}} />
export const TopMenu: React.FC<Props> = (props) =>
{
const { onClickMask , visible } = props
const maskStyles = useSpring({
opacity: visible ? 1 : 0,
})
const menuStyles = useSpring({
opacity: visible ? 1 : 0,
transform: visible? 'transformX(0%)' : 'transformX(100%)'
})
return (
<>
<animated.div fixed top-0 left-0 w='100%' h="100%" bg="[rgba(0,0,0,.75)]" z="[calc(var(--z-menu)-1)]"
onClick={onClickMask} style={maskStyles}/>
<animated.div fixed top-0 left-0 w="70vw" max-w-20em h-screen flex flex-col b-3px
b-red z="[var(--z-menu)]" style={menuStyles}>
<CurrentUser className="grow-0 shrink-0" />
<Menu className="grow-1 shrink-1" />
</animated.div>
</>
)
}
但这里是会出现一个bug
因为我们点击黑色的触发的点击事件 将改变visible的值 但我们一开始是设置了一个判断语句 就是visible为真才显示菜单 但现在我们已经改为直接给Topmenu visible变量 那么通过react.spring写的maskStyles 是改变标签的opacity的样式
opacity为true是看的见摸得着 为false是看不见但还是摸得着 也就是说就算visible为false那个div还是存在那里
PS:而visibillty属性和display属性 visible的时候是看得见且存在 而hidden的时候是看不见且不存在
所以解决方式为
可以利用react.spring中的回调函数 当动画开始的时候onStart以及当动画结束的时候onRest
然后用useState 给创建的maskVisible赋初值false （让他不要干扰用户点击菜单窗口） 然后每当动画开始的时候也就是 当前的opacity将从0变为1的时候（onStart是动画已经开始了一小段时间，所以我们令当value.opacity < 0.1的时候） 将maskVisible变为true 这maskVisible对应的是改变灰黑色罩子div的visibility 让他显示 于是这个时候就会有动画然后灰黑色的罩子慢慢出现
同理一段动画快要结束的时候 也就是opacity从1快要变为0的时候 我们让maskVisible变为false
