我在调试页面的时候发现了一个细节上的问题,对于追求强迫症的人来说,这个也是不能够忍受的,于是我开始排查,最终却发现竟然是由于给元素设置了透明度而导致的。
在本站的手机版底部我们做了一个抽屉式的菜单导航,这个设计是借鉴了腾讯广告的网站页面,但我们在样式上也做了一些创新,当点击菜单旁边的加号时,子菜单会以渐显动画的方式呈现,我发现在这个动画执行的过程中会导致子菜单的行高发生轻微的变化而引起不必要的抖动,这本是一个无关紧要的问题,但是我很好奇这是由于什么原因而导致的,经过一系列排查最终发现当我把子菜单的透明度样式去掉后就不会抖动了,于是确定这个问题就是透明度 opacity 引起的,虽然不理解为什么这个样式会造成这种问题,不过知道了原因就很容易解决了,现在我采用了设置字体颜色的变化来实现了这个渐隐渐显的动画,这个问题初步得到完美的解决。