614

複数のプロパティを持つCSSトランジションの省略形の正しい構文が見つからないようです。これは何もしません：

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

javascriptでshowクラスを追加します。要素が高くなり、表示されます。遷移しません。最新のChrome、FF、Safariでテストしています。

私は何が間違っているのですか？

編集：明確にするために、CSSを縮小するための短縮版を探しています。すべてのベンダープレフィックスで十分に肥大化しています。サンプルコードも拡張しました。

4

7 に答える 7

875

構文：

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

後者が指定されている場合、期間は遅延の前に来る必要があることに注意してください。

簡略宣言で組み合わされた個々の遷移：

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

または、それらすべてを移行するだけです。

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

これは簡単な例です。これは、delayプロパティを持つ別のものです。

編集：以前にここにリストされたのは、に関する互換性と既知の問題transitionでした。読みやすくするために削除されました。

結論：それを使用するだけです。このプロパティの性質は、すべてのアプリケーションで破損することはなく、互換性は現在、世界全体で94％をはるかに上回っています。

それでも確認したい場合は、http：//caniuse.com/css-transitionsを参照してください。

于 2012-03-12T15:51:30.600 に答える
521

同じ方法で移行したい特定のプロパティがいくつかある場合（たとえば、特に移行したくないopacityプロパティもいくつかあるため）、別のオプションは次のようにすることです（簡潔にするためにプレフィックスは省略されています）。

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

2番目の宣言は、その上の省略形の宣言をオーバーライドし、all（場合によっては）より簡潔なコードを作成します。

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}
<p>Hover box for demo</p>
<div class="box"></div>

デモ

于 2013-06-14T22:09:18.667 に答える
57

私はそれをこれで動作させました：

.element {
   transition: height 3s ease-out, width 5s ease-in;
}
于 2018-04-19T11:45:04.090 に答える
3

注意すべき重要な点の1つは、CSStransitionプロパティ自体が省略形であるということです-MDN WebDocsで述べられているように：

transitionCSSプロパティは、、、、およびの省略transition-property形のtransition-durationプロパティtransition-timing-functionですtransition-delay。

この省略形の理想的な使用法は、単一の遷移のさまざまな構成要素のプロパティを組み合わせることです。これを使用して複数のトランジションを組み合わせると、不格好になり始めます。

したがって、構成プロパティが異なる同じ要素に3つ以上のトランジションがある場合、省略形を使用する代わりに、それらを個別に記述する方が簡単になりますtransition。例えば：

これは、1つの要素での複数の遷移の短縮バージョン（オプション1）です。

transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out, filter 0.1s ease-out, color 0.25s ease-in 0.2s;

ご覧のとおり、これは不格好になり、視覚化が少し難しくなります。
同じCSSを次のように適用できます（オプション2）：

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s, 0.2s, 0.2s, 0.25s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

もちろん、最終的には、ソースコードの入力と保守の好みに依存します。しかし、私は個人的に2番目のオプションを好みます。

ヒント：

これを使用することの追加の利点は、Constituentプロパティの1つがすべての遷移で同じである場合、それを何度も言及する必要がないことです。たとえば、上記の例で、がすべての場合transition-durationにsame（0.5s）である場合は、次のように記述します。

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s
于 2021-11-05T18:28:05.017 に答える
2

不透明度プロパティの遷移に0.5秒の遅延を設定することにより、要素の高さが遷移している間、要素は完全に透明になります（したがって非表示になります）。したがって、実際に表示されるのは不透明度の変化だけです。したがって、heightプロパティを遷移から除外するのと同じ効果が得られます。

「トランジション：不透明度.5s.5s;」

それはあなたが望んでいることですか？そうでない場合で、高さの遷移を確認したい場合は、遷移している間、不透明度をゼロにすることはできません。

于 2015-04-03T22:13:36.743 に答える
2

これは私がアニメーション化するために必要なものだけを理解/合理化するのに役立ちました：

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

〜これは、「。base」クラス内のすべての遷移プロパティ（duration、transition-timing-functionなど）に適用されます

于 2020-05-20T11:47:44.763 に答える
-7

私はこれがうまくいくはずだと思います：

.element {
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
}
于 2015-09-05T16:28:27.593 に答える