css - Firefox css 转换在生成内容之前不会开始

Question

** 更新 ** 如果其他人遇到此问题，Firefox 已提交错误https://bugzilla.mozilla.org/show_bug.cgi?id=1011153

http://jsfiddle.net/ZEzc9/3/

今天找到了这个并为它设置了一个小提琴。我现在能说的最好的是，如果目标元素前面是生成的内容，其中应用了过渡效果，则过渡无法启动。

html:

"Some text" animates up and down smoothly on hover.
<div>
    <div>
        <span> Some text</span>
    </div>
</div>

"Some text" should animate in and and out. In Firefox, the generated content on div > div:hover::before stops the inital animation.
<div>
    <div>
        <span> Some text</span>
    </div>
</div>

CSS：

div {
    width: 300px;
    height: 100px;
    position: relative;
    outline: 1px solid #cc0000;
}
div > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #000;
}
div > div > span {
    bottom: 10px;
}

div > div > span {
    position: absolute;
    bottom: 20px;
    left: 20px;
    -webkit-transition: bottom 250ms;
    transition: bottom 250ms;
}
div:last-child > div:hover::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #cc0000;
}
div > div:hover span {
    bottom: 50px;
}

我只在 Firefox 中看到这种行为。发生这种情况是否有原因，或者这似乎是 FF 中的错误？

Answer 1

看起来像一个错误，我在使用 Fx 29.0.1、Win7 x64 时看到了同样的情况。

:hover但是，对于它的价值，如果您在没有伪类的情况下创建静态不可见的生成内容，它将起作用，即

div:last-child > div::before {
  content:'';
  /* … */
  background:transparent;
}

但让它在悬停时可见，即

div:last-child > div:hover::before {
  background:#cc0000;
}

我更新了你的小提琴来展示这一点。