web-dev-qa-db-ja.com

CSSトランジションによる最大高さのアニメーション化

クラス名のみで動作する展開/折りたたみアニメーションを作成したい（クラス名の切り替えにはJavaScriptが使用されます）。

1つのクラスを提供していますmax-height: 4em; overflow: hidden;

その他のmax-height: 255em;（値を試してみましたnone、まったくアニメーション化されませんでした）

アニメーション化するこれ：transition: max-height 0.50s ease-in-out;

CSSトランジションを使用してそれらを切り替えましたが、ブラウザーはこれらの余分なemをすべてアニメーション化しているように見えるため、折りたたみ効果に遅延が生じます。

その副作用を持たない（同じ精神で-cssクラス名で）それを行う方法はありますか？大きな価値の理由、それは合法的な長いテキストを切り捨てず、ばかげて長いテキストのみをカットします）

JsFiddleを参照してください- http://jsfiddle.net/wCzHV/1/ （テキストコンテナをクリックしてください）

css3css-transitionscss-animations
38
Madd0g

誰かがこれを読んでいる場合、私は解決策を見つけていませんでしたし、展開のみの効果で行きました（transitionスタイルを展開されたクラス定義に移動することによって達成されました）

5
Madd0g

遅延ソリューションを修正します。

要素に3次ベジエ（0、1、0、1）遷移関数を配置します。

scss

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);

  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
  }
}

css

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.text.full {
  max-height: 1000px;
  transition: max-height 1s ease-in-out;
}
58
egor.xyz

これは古い質問ですが、私はそれを行う方法を考え出し、どこかに貼り付けたいと思ったので、もう一度それを必要とする場合にどこで見つけるかを知っています：o）

そのため、対応する「sectionContent」divを表示/非表示にする、クリック可能な「sectionHeading」divのアコーディオンが必要でした。セクションコンテンツdivの高さは可変であるため、高さを100％にアニメートできないため、問題が発生します。代わりにmax-heightをアニメートすることを示唆する他の回答を見ましたが、これは、使用するmax-heightが実際の高さよりも大きい場合に遅延が発生することがあることを意味します。

アイデアは、ロード時にjQueryを使用して、「sectionContent」divの高さを見つけて明示的に設定することです。次に、CSSクラス「noHeight」をクリックハンドラーに追加して、切り替えます。

$(document).ready(function() {
    $('.sectionContent').each(function() {
        var h = $(this).height();
        $(this).height(h).addClass('noHeight');
    });
    $('.sectionHeader').click(function() {
        $(this).next('.sectionContent').toggleClass('noHeight');
    });
});

完全を期すために、関連するCSSクラスは次のとおりです。

.sectionContent {
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.noHeight {
        height: 0px !important;
}

これで、高さの遷移は遅延なく機能します。

8
Will Jenkins

ソリューションは実際には非常に簡単です。コンテンツを持つ子divを作成します。親divは、折りたたみを展開するものになります。

ロード時に、親divの最大高さが設定されます。トグルするときは、document.querySelector('.expand-collapse-inner').clientHeight;を記述して子の高さを確認し、javascriptでmaxheightを設定できます。

あなたのCSSでは、これがあります

.parent {
transition: max-height 250ms;
}
1
Johansrk