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

【问题标题】：Firefox css transition doesn't start when preceded by generated contentFirefox css 转换在生成内容之前不会开始
【发布时间】：2014-07-01 20:59:19
【问题描述】：

** 更新 ** 如果其他人遇到此问题，已向 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 中的错误？

【问题讨论】：

标签： css firefox css-transitions css-content

【解决方案1】：

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

但是，无论如何，如果您创建没有 :hover 伪类的静态不可见生成内容，它会起作用，即

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

但让它在悬停时可见，即

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

I updated your fiddle to show this.

【讨论】：

看来，无论出于何种原因，Firefox 都在尝试转换生成内容的存在，这当然没有意义并且会失败（考虑到只有初始动画失败，这就更奇怪了)。理想情况下，一个过渡应该只适用于它被声明的任何东西，独立于它的任何兄弟、祖先或后代（这包括生成的内容和任何其他伪元素）。