1

要素に CSS トランジションを設定しており、すべてのプロパティが影響を受けています。どのCSSプロパティが変わるかは前もって分からないので、性能の問題とはいえ「すべて」を使うしかない。

.a {
    transition: all 0.5s ease-in-out;
}

ただし、特定のプロパティに、他のすべてのプロパティとは異なる独自の遷移設定を持たせたい:

.a {
    transition: all 0.5s ease-in-out, margin-top 5s linear;
}

transition-propertyの W3C 文法によれば、'all' が指定された後に他の値を許可する必要があります。

ただし、これは Firefox (18) と Opera (12) では機能しないようです。Chrome/Safari (接頭辞付き) および IE10 で正しく動作します。

これは、動作を示すフィドルです: http://jsfiddle.net/F7tb5/3/

変更される可能性のあるすべてのプロパティを手動で列挙することなく、最新のすべてのブラウザでこれを機能させる方法はありますか?

4

1 に答える 1

0

これは Firefox のバグです: https://bugzilla.mozilla.org/show_bug.cgi?id=835007 (同様の質問: 14533519ですが、最近 Firefox 21 マイルストーンで修正されました。それまではall、複数の遷移があり、すべてのプロパティを個別に指定する必要があります。

ただし、公平を期すために、最新の W3C ドラフトのみがこの動作を明示的に述べています。以前のバージョンでは、このケースをどのように処理すべきかが明確ではありませんでした。

同様のケースがあり、回避策は、以前に知られているすべてのプロパティをアニメーション化しallて実際の要素に残すラッパー要素を作成することでした:

.wrap.a {
  transition: margin-top 5s linear;
}

.wrap.a .inner {
  transition: all 0.5s ease-in-out;
}
于 2013-02-27T20:07:04.250 に答える