0

请在 Safari 或 Chrome 以及 Firefox 中测试以下小提琴。您会注意到 Safari 中的动画很流畅，即使鼠标不再悬停在 div 上（当 div 移过鼠标时）。然而，在 Firefox 中，一旦 div 移动到鼠标不再接触的位置，它就会开始移回原来的位置，从而导致难看的抖动。我可以使用 JavaScript 来解决这个问题吗？

jsFiddle

#object01 {
   position:relative;
   margin-top:10em;
   width:300px;
   height:300px;
   background-color:red;
   border:2px solid black;
   transform:rotate(5deg);
   -webkit-transform:rotate(5deg);
   -moz-transform:rotate(5deg);
   -o-transform:rotate(5deg);
   -ms-transform:rotate(5deg);
   z-index:1000;
   transition:all 1s ease;
   -webkit-transition:all 1s ease;
   -ms-transition:all 1s ease;
   -moz-transition:all 1s ease;
   -o-transition:all 1s ease;
   top:0;
}

#object01:hover {
   transform:rotate(0deg);
   -webkit-transform:rotate(0deg);
   -moz-transform:rotatate(0deg);
   -o-transform:rotate(0deg);
   -ms-transform:rotate(0deg);
   top:-250px;
}
4

1 回答 1

0

为避免需要更改标记，您可以添加一个伪元素并以相反的方向动画，因此当主元素移动时它将“保持活动区域”：

#object01:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
    transition:all 1s ease;
}

#object01:hover:after {
    -webkit-transform: translateY(250px);
    -moz-transform: translateY(250px);
    -o-transform: translateY(250px);
    -ms-transform: translateY(250px));    
    transform: translateY(250px);
}

（小提琴）

此外，有几个观察结果表明，动画transform: translate(...)比动画top/ left: 1 , 2具有更好的性能并且动画更流畅。如果无前缀属性在前缀属性之后会更好（因为如果浏览器同时支持前缀和无前缀语法，则前缀实现比无前缀实现更有可能出现错误）。-ms-transition因为IE9不理解，所以不需要特别说明，而且IE10的所有出厂版本都支持无前缀语法。

于 2013-07-07T17:37:04.093 回答