Question

我有一个div，css transitions已应用于hover，在hover in上，transition上应用了:before element，hover out上transition上应用:before（已反转）<section class="strips"> <article class="strips__strip"> <div class="strip__content"> <h1 class="strip__title">Title</h1> </div> </article> </section>元素

这是html：

.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);
}

和（重要的部分）css：

       int s = 0;
       char *buf = NULL;
       FILE *stream = fmemopen(buf, 1000, "a+");
       if (stream == NULL)
           /*handle the error code*/
       while(some_condition){
       /*writing into the stream*/
       s = fprintf(stream, "%s ", "bla bla bla ");
       if (s == -1){
           printf("failed fprintf with %s\n", strerror(errno));
           break;
       }
       else{
           printf("written %d chars\n", s);
       }
       }

现在，如果我允许完成转换，转换工作将顺利进行，但是，如果我不允许转换中的悬停完成，并快速悬停，则悬停转换不起作用。

这是一个小提琴： 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）。

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

css过渡：如果不允许悬停，则悬停在过渡不起作用

1 个答案: