web-dev-qa-db-ja.com

複数のプロパティを持つCSSトランジションの短縮形？

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でショークラスを追加します。要素が高くなって表示されるようになり、遷移しません。最新のChrome、FF、Safariでテスト中。

何がおかしいのですか？

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

csscss3webkitcss-transitionsshorthand
424
Gregory Bolkenstijn

構文：

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;

これは 簡単な例 です。これはもう1つです 遅延特性を持つ 。

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

要するに、それを使うだけです。このプロパティの性質はすべてのアプリケーションにとって壊れることはなく、互換性は現在世界全体で94％をはるかに超えています。

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

636
Rémi Breton

同じ方法で移行したい特定のプロパティがいくつかある場合（移行したいプロパティがいくつかあるため、 don't を指定する場合、opacityなど）、次のようにすることもできます（簡潔にするために省略した接頭辞）：

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

2番目の宣言は、その上の速記宣言のallをオーバーライドして、（時折）より簡潔なコードにします。

デモ

355
Jason

私はこれで動作します：

element{
   transition : height 3s ease-out, width 5s ease-in;
}
13
AhbapAldirmaz

不透明度プロパティの遷移を0.5秒遅らせることで、要素の高さが遷移している間、要素は完全に透明になります（したがって表示されなくなります）。だからあなたが実際に見る唯一のものは不透明度が変化することです。そのため、heightプロパティをトランジションから除外したのと同じ効果が得られます。

"遷移：不透明度.5秒。5秒;"

それはあなたが欲しいものですか？そうではなく、高さの変化を見たいのであれば、変化している間ずっと不透明度を0にすることはできません。

2
J.B.