新会员白菜网送体验金前端开发
新会员白菜网送体验金用户体验

chrome transition闪烁BUG

    前段时间写鼠标悬停元素上移效果时,当鼠标恰好放在元素边缘时,chrome出现一直上下移动的问题,其他浏览器表现正常。原因尚不知,可能是实现方式不对吧(PS:使用top实现),虽然不知道原因,但是问题还是要解决的,分享一个能绕开的实现方式。

    说到鼠标悬停元素上移,首先想到的是鼠标悬停时元素上移,然后应用transition来实现渐变效果。

    1、使用top实现(该实现方式chrome浏览器闪烁,避免使用)

<!--html-->
<div class="test"></div>

/*css*/
.test {
     position: relative;
     top: 0; 
     transition: top 0.5s;
 }

.test:hover{
     top: -10px;
 }

    2、使用transform实现(推荐)

<!--html-->
<div class="test"></div>

/*css*/
.test {
     transform: translateY(0);
     transition: transform 0.5s;
 }

.test:hover{
     transform: translateY(-10px);
 }
注册就送10元(229)
未经允许不得转载:大前端 » chrome transition闪烁BUG
分享到: 更多 (0)

评论 6

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #5

    你试用定位,在hover的时候dom已经不在原位置了,也就是移动以后hover状态已经不存在所以会有“闪烁”现象。而transfrom只是视觉位移,dom其实还在原位。事实上在外层多加一个父元素,将hover状态写在这个父元素上去控制子元素定位变化,就能避免这个问题。

    Easlie2个月前 (09-05)回复
  2. #4

    股份大股东

    范德萨4个月前 (06-26)回复
  3. #3

    用这个方法写出来的在safari浏览器中会闪烁,求解
    .box{
    position: relative;
    left: 10px;
    width: 20px;
    height: 30px;
    background: red;
    transform: translateY(30px);
    transition: transform 2s linear;
    -webkit-transform:translateY(30px);
    -webkit-transition:-webkit-transform 2s linear;
    }
    .box:hover{
    transform: translateY(0);
    -webkit-transform:translateY(0);
    }

    橘橙夏日6个月前 (04-10)回复
  4. #2

    position用于布局,transform用于变化(动画)

    nn7个月前 (04-04)回复
    • 发的规划规划

      范德萨4个月前 (06-26)回复
  5. #1

    测试了一下,我这边(macOS 10.13.3 High Sierra)在 Chrome (65.0.3325.181) 里用 transition 是正常的。是不是 Chrome 版本的问题?

    TROJAN7个月前 (03-31)回复

themebetter 国内更好的WordPress主题服务商

立即前往
博聚网