css - 我怎样才能使这个 CSS 转换在 Firefox 中不那么不稳定？

Question

请在 Safari 或 Chrome 以及 Firefox 中测试以下 fiddle 。您会注意到 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;
}

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 )

另外，有几项观察表明，与 top/left 相比，transform: translate(...) 动画具有更好的性能并且更流畅: 1 , 2 .如果无前缀的属性在带前缀的属性之后更好(因为如果浏览器同时支持带前缀和无前缀的语法，那么有前缀的实现比无前缀的实现更有可能出错)。并且无需指定 -ms-transition，因为 IE9 无法理解它，并且所有已发布的 IE10 版本都支持无前缀语法。