1

** 更新 ** 他の誰かがこの問題に遭遇した場合は、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 のバグのようですか?

4

1 に答える 1

1

バグのようです。Fx 29.0.1、Win7 x64 を使用しても同じことがわかります。

:hoverただし、疑似クラスを使用せずに静的で非表示の生成コンテンツを作成すると機能します。つまり、

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

ただし、ホバーすると表示されます。つまり、

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

これを示すためにフィドルを更新しました。

于 2014-05-15T02:21:27.067 に答える