html - CSS transition 是否会破坏 transform 属性(悬停时)？

Question

我有以下问题。当我使用转换设置 CSS 转换(悬停时为 translateZ)时，奇怪的事情开始发生。如果你只是将鼠标悬停在元素上，它会按预期工作，但是当你开始快速悬停(快速连续)时，变换开始中断并且效果成倍增加(在正 transformZ 的情况下，元素将移动“更近和更远”离你更近”，即使它会在片刻之后返回到指定位置)。

这是代码，HTML:

<div id="wrapper">
    <ul>
        <li></li>
    </ul>
</div>

和 CSS:

#wrapper {
    perspective: 2000px;
}

ul li {
    width: 200px;
    height: 40px;
    background: #0160ad;
    transition: all 0.3s linear;
}

ul li:hover {
    -webkit-transform: perspective(2000) translateZ(300px);
}

所以我在这里做错了什么，或者它就是这样，必须以其他方式来防止这种情况发生。

fiddle

Answer 1

当您转换某些东西时，在两种状态下都设置属性总是一个好主意。并且，尽可能相似(保持未使用的属性相同)。

所以，设置

ul li {
    width: 200px;
    height: 40px;
    background: #0160ad;
    transition: all 0.3s linear;
    -webkit-transform: perspective(2000) translateZ(0px);
}

ul li:hover {
    -webkit-transform: perspective(2000) translateZ(300px);
}

它工作正常:fiddle