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

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元(251)
未经允许不得转载:大前端 » chrome transition闪烁BUG
分享到: 更多 (0)

评论 14

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

    Keep up the good work! Thanks.

  2. #12

    Enjoyed the post.

  3. #11

    Enjoyed the post.

  4. #10

    Thanks for this nice post. …

  5. #9

    Way cool! Some very valid points! I appreciate you writing this post and also the rest of the website is also really good.

    Apex Legends3周前 (03-31)回复
  6. #8

    as soon as I noticed this internet site I went on reddit to share some of the love with them.

  7. #7

    Saved! Found your self on google and I am glad I was able to. Great site you ought to get plenty of traffic here’ like to own a blog along these lines.

    Ava Barnes1个月前 (03-13)回复
  8. #6

    Wonderful post, thanks for discussing the data. It isn’t all too often that you simply read articles where the poster knows what they’re running a blog regarding. Grammar and punctuational are spot on too, only trouble We seemed to possess had been mentioning the website, seemed sluggish. Looks like additional visitors experienced exactly the same difficulty?

    Kenneth Felman1个月前 (03-11)回复
  9. #5

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

    Easlie8个月前 (09-05)回复
  10. #4

    股份大股东

    范德萨10个月前 (06-26)回复
  11. #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);
    }

    橘橙夏日1年前 (2018-04-10)回复
  12. #2

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

    nn1年前 (2018-04-04)回复
    • 发的规划规划

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

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

    TROJAN1年前 (2018-03-31)回复

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

立即前往
博聚网