Question

请在Safari或Chrome以及Firefox中测试以下小提琴。即使鼠标不再悬停在div上（当div移过鼠标时），你会注意到Safari中的动画很流畅。然而，在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;
}

Answer 1

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

#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);
}

（fiddle）

此外，有几个观察结果表明动画具有更好的性能，如果动画transform: translate(...)比动画top / left动画更顺畅：1，2 。如果未加前缀的属性跟在前缀之后，那就更好了（因为如果浏览器同时支持前缀和未加前缀的语法，那么前缀实现的机会比没有前缀的实现更多）。并且没有必要指定-ms-transition，因为IE9不理解它，所有出版的IE10都支持未加前缀的语法。

如何让这个CSS过渡在Firefox中不那么摇摇欲坠？

1 个答案: