天天看点

Vue-cli脚手架搭建的项目opacity和transform配合使用,页面出现模糊的问题

在项目开发的时候发现了鼠标滑过页面时,鼠标点击事件时,页面上会有类似模糊的问题。

一开始发现,是因为项目上用了transform:scale(x,y);来做页面自适应,去掉这个最外层div上的属性之后,没有这个模糊的问题,但是又不能舍弃这个方法,重新修改工程下各组件达到页面自适应,太耗时。暂时没有解决方法也就作罢。

在做这个项目的时候,还刚上手Vue不久,所以借用了这个项目来边写代码边做学习试手之用。在用到transition组件将某个div的opacity设为0时,出现了这个模糊的问题,探究一二得知是项目里的用了elementui自带的<el-scrollbar>组件做滚动条,这个滚动条当鼠标移开时会将opacity设为0,用于隐藏,鼠标移入时将opacity设为1,,用于显示,导致的模糊。

所以在滚动条样式里将opacity强制设为了1,暂时解决了这个问题。但是为什么会导致这个问题,还没有研究出来。

继续阅读