Question

我在谈论这个例子（badAdviceGuy created it for me）：

.wrapper {
    width: 300px;
}

li {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: relative;
    padding: 3px;
}
a {
    display: block;
    height: 40px;
    width: 40px;
    background: lightblue;
    position: absolute;
    -webkit-transition: .3s;
    transition: .3s;
}
a:hover {
    -webkit-transform: scale(2,2);
    transform: scale(2,2);
    z-index: 100;
    background: lightgreen;
}

当我快速悬停在网格元素上时，只要我离开元素，缩放效果就会突然停止。实际上，我读到它并没有停止，但是当鼠标再次出现时立即恢复：

Starting and Reversing a Transition：

通常，当转换开始时，它必须根据设置的transitionproperties完成，即使这些属性被另一个操作更改。但有时这样做是没有意义的。一个常见的情况是将鼠标悬停在一个元素上，该元素开始转换，然后快速移出。上面的规则说：hover过渡必须在转换回它的初始值之前完成，但是这与预期的行为不匹配。预期的行为是在鼠标移出时原始转换停止并立即反向移动。这是规范所要求的。你可以阅读有关如何实现这一目标的技术解释，但要点是，转换的任何部分都发生在现在发生鼠标移出的地方。您也无需做任何事情来实现这一目标。这都是自动的。

我的问题是我不想要的。我以前有一个Javascript完成了一个很好的完全转换，直到完成，所以我可以刷过所有的网格，单个瓷砖慢慢移动，并在我离开瓷砖区域时继续。

在css中有没有一种简单直接的方法来实现这一目标？

鼠标移动时CSS转换突然停止

0 个答案: