0

Chrome は問題ありませんが、Firefox (v17 で試行) で遭遇した CSS3 ネイティブ アニメーションには問題があります。

サンプルは Codepen でも入手できます: http://codepen.io/anon/pen/yxteC

コードも以下に複製されます。
いくつかのクラスをいくつかの要素に適用します（ホバリング時にJSで適用しようとしましたが、ホバリング自体はまったく同じように機能します（クラス:hoverではなくセレクター.hover））。したがって、問題は、Firefox ではアニメーションが 1 回だけトリガーされることです。つまり、クラスが最初に適用されたときです。次回はそうではありません。
それはChromeで完全に機能します。ただし、他のブラウザーはテストしていません (IE はまだそれを広くサポートしておらず、Opera ... まあ、今のところあまり気にしません)。

もう 1 つの詳細: 内部要素 ( display:none/ block) を非表示/表示しない場合、Firefox で問題なく動作します (ただし、これは明らかに解決策ではありません)。

一般的な清潔さとコードの可能な改善に関連するコメントを追加しないでください。これはほんの一例です。

HTML:

<div>
  <span>menu</span>
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  </ul>
</div>

CSS:

ul
{
    display: none;
}

div.hover ul
{
    display: block;
}

div li
{
    position: relative;
    top: -10px;
}
div.hover li
{
    -webkit-animation: filterAppear 0.5s;
       -moz-animation: filterAppear 0.5s;

    top: 0;
    opacity: 1;

    -webkit-animation: filterItemAppear 0.1s;
       -moz-animation: filterItemAppear 0.1s;
    -webkit-animation-fill-mode: backwards;
       -moz-animation-fill-mode: backwards;
}

div.hover li:nth-child(1)
{
    -webkit-animation-delay: 0.15s;
       -moz-animation-delay: 0.15s;
}
div.hover li:nth-child(2)
{
    -webkit-animation-delay: 0.35s;
       -moz-animation-delay: 0.35s;
}
div.hover li:nth-child(3)
{
    -webkit-animation-delay: 0.55s;
       -moz-animation-delay: 0.55s;
}


@-webkit-keyframes filterItemAppear
{
    from { opacity:0; top:-25px; }
    to { opacity:1; top:0; }
}
@-moz-keyframes filterItemAppear
{
    from { opacity:0; top:-25px; }
    to { opacity:1; top:0; }
}
4

1 に答える 1

1

私も同様の問題を抱えていましたが、今日は解決策を見つけます。

FirefoxはどういうわけかDOM操作に気付く必要があります。したがって、.width()またはを追加する必要がありsetTimeoutます。幅のソリューションは、よりクリーンなIMOです。

私が編集したCodePenを見て、例http://cdpn.io/yhbfBを確認してください。

（詳細については、http：//css-tricks.com/restart-css-animation/を参照してください）

于 2013-01-21T13:22:23.443 に答える