我正在做一个大项目,并且我只用过几次变换,所以我没有太多的经验。这次,客户对效果有许多要求。

我有一个#item,里面有一个按钮和一个透明的div。悬停时,opacity会在透明的0.8上更改为div,并且按钮从顶部显示为transform。问题是,当我将鼠标悬停在div上时,该按钮出现了,但是几毫秒后,您会看到该按钮的大小增加并且文本移动了几个像素。 (Firefox 42.0-OSX)

我尝试了几种解决方案来修复它,但是没有运气,我真的不知道为什么会这样。 (-webkit-font-smoothing: antialiased;

我很幸运,因为这一次我将其复制到一个文件中,并且不需要复制100kb的CSS。 :)

代码真的很简单。如果您能给我一些指导,教程或解决方案,请多多关照。

我在下面添加了代码,但在JSFiddle也可以使用。



#item {
    width: 300px;
    height: 300px;
    background: gray;
    position: relative;
}

a {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 10px 15px;
    background: black;
    display: inline-block;
    transform: translate(-50%, -80%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    color: #fff;
    text-decoration: none;
}

#item:hover a {
    transform: translate(-50%, -50%);
    opacity: 1;
}

#overlay {
    background-color: green;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

#item:hover #overlay {
    opacity: 1;
}

<div id="item">
    <div id="overlay"></div>
    <a href="">Button</a>
</div>

最佳答案

一些CSS渲染起来“昂贵”。您可以添加此转换技巧,以使您的GPU顺利完成此任务。它告诉浏览器将进行z轴转换(为零,实际上不是转换),因此计算机除了使用CPU外还使用GPU。这种增加的功能通常有助于解决视觉故障。虽然严格来说这是一个hack :)

萨斯:

.gpu {
  @include vendor(transform, translateZ(0));
}


的CSS

.gpu {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

10-05 20:47
查看更多