html - CSS过渡:如果不允许完成移入，则移出过渡不起作用

我有一个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结束，转换会顺利进行，但是如果我不允许hover-in转换完成，并且快速悬停，那么hover-out转换就不起作用。
这是一把小提琴：
https://jsfiddle.net/x2pavnac/
（尝试在转换完成之前悬停）。
我不确定为什么会发生这种情况，以及如何在css中解决这个问题。
编辑：
我已经简化了转换，也增加了不透明度，所以它更可见。
更新小提琴：https://jsfiddle.net/x2pavnac/4/

最佳答案

我不知道为什么这对其他人有用，但我发现我的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）。
尽管如此，我仍然不确定为什么它对其他人来说是正确的，即使是打字错误。

关于html - CSS过渡:如果不允许完成移入，则移出过渡不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36642883/