css转换:如果不允许完成悬停入，则悬停出转换不起作用

Question

我有一个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/

Answer 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）。

我仍然不确定为什么它对其他人来说是正确的，即使有错别字。