css - Firefox css 转换在生成的内容之前不会启动

Question

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

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

今天发现了这个并为它设置了一个 fiddle 。我现在能说的最好的是，如果目标元素之前是应用了过渡效果的生成内容，则过渡将无法开始。

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 时看到了同样的事情。

但是，就其值(value)而言，如果您在没有 :hover 伪类的情况下创建静态不可见的生成内容，它将起作用，即

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

但让它在悬停时可见，即

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

I updated your fiddle to show this.