css过渡：如果不允许悬停完成，悬停过渡不起作用答案

【问题标题】：css transitions: hover out transition not working if hover in is not allowed to completecss过渡：如果不允许悬停完成，悬停过渡不起作用
【发布时间】：2016-04-15 17:51:37
【问题描述】：

我有一个div，为此css transitions 应用于hover，在hover in 上，transition 应用于:before element，在hover out 上，相同的transition（反转）应用于:before 元素。

这里是html：

<section class="strips">
          <article class="strips__strip">
                <div class="strip__content">
                  <h1 class="strip__title">Title</h1>
                </div>
          </article>
</section>

和 css 的（重要部分）：

.strips .strip__content:hover:before {
  transform: skew(180deg) scale(1) translate(0, 0);
  opacity: 0.1;
}

.strips .strip__content:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0.05;
  transform-origin: center center;
  transform: skew(180deg) scaleY(0) translate(0, 0);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

现在，如果我允许 tem 完成，则过渡可以顺利进行，但是如果我不允许悬停过渡完成并快速悬停，则悬停过渡不起作用。

这是一个小提琴： https://jsfiddle.net/x2pavnac/

（尝试在过渡完成之前将鼠标悬停）。

我不确定为什么会发生这种情况以及如何在 css 中解决此问题。

编辑：

我简化了过渡并增加了不透明度，因此它更明显。更新小提琴：https://jsfiddle.net/x2pavnac/4/

【问题讨论】：

它适合我吗？
您是否尝试在悬停完成之前将鼠标移出 div？
是的。它滑动打开，然后如果我快速移出，它会滑回关闭 - 无论我在什么时候这样做。这不是想要的效果吗？
@GavinThomas 是的，这是想要的效果。但是，在相同的情况下，它不会对我来说很接近。我正在使用铬。
Fx 45 在这里，你最新的小提琴工作正常：当我中断动画时，它会很好地反转并再次滑动关闭。最新的 Cr 确实显示了有问题的行为：悬停将首先完成，但它会显示为一个已完成的悬停动画，而它会花费悬停完成的时间，并且只有在该时间之后 Cr 才会转换要悬停的元素的状态。

标签： html css css-transitions

【解决方案1】：

我不确定为什么这对其他人有用，但我在我的 css 中发现了一个错字，这就是我的问题：

.strips .strip__content:before {
  transform: skew(180deg) scaleY(0) translate(0, 0);
}

.strips .strip__content:hover:before {
  transform: skew(180deg) scale(1) translate(0, 0);
  opacity: 0.1;
}

应该是

.strips .strip__content:before {
  transform: skew(180deg) scaleY(0) translate(0, 0);
}

.strips .strip__content:hover:before {
  transform: skew(180deg) scaleY(1) translate(0, 0);
  opacity: 0.1;
}

注意 scaleY(1) 而不是 scale(1)。

我仍然不确定为什么它对其他人正常工作，即使有错字。

【讨论】：