web-dev-qa-db-ja.com

Angular ngx-ブートストラップの崩壊はアニメーション化されません

angular 5とngx-bootstrapを使用しているので、折りたたみをたどってcollpaseを追加しようとすると、 docs 、実際の例が得られましたが、アニメーションはありません（折りたたまれたものは消え、効果なしで即座に表示されます）。

では、アニメーションを表示する方法はありますか？

angularanimationangular5collapsengx-bootstrap
6
Abdennacer Lachiheb

私は同じ問題を抱えていました、そして私はいくつかのcssトリックによってそれを解決します。それは私のために働いた。それがあなたのために働くことを願っています。 ngx-bootstrapが「.collapsing」クラスを使用しないために発生するため、コードにいくつかの変更を加えました。

#your_nav{
    display: block !important;
    max-height: 1px !important;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#your_nav.show{
    max-height: 230px !important;
}
4
Irfan

これは、プロジェクト全体の解決策になる可能性があります。

.collapse {
    transition: all 0.3s ease-out;
    display: block !important;
    overflow: hidden !important;
    max-height: 0;
}

.collapse.in {
    transition: all 0.5s ease-in;
    max-height: 9999px; /*any number which is lager than a height of any of your elements*/
}
3
Oleg Polezky

次の答えは、ngb versionn5.x.xに対するものです。

[ngbCollapse]ディレクティブをアニメーション化する場合

コンポーネントのscssファイルのコードを使用し、要件に応じて次のscssを変更します。

.collapse {
  transition: transform .35s, opacity .35s, max-height .9s ease-out;
  opacity: 0;
  max-height: 0;
  // transform: translateY(100%);
  display: block !important;

  &.show {
    opacity: 1;
    max-height: 600px;
    // transform: translateY(0);
  }
}

またはCSSを使用している場合：以下のコードを使用します：

.collapse {
  transition: transform .35s, opacity .35s, max-height .9s ease-out;
  opacity: 0;
  max-height: 0;
  // transform: translateY(100%);
  display: block !important;

}

.collapse.show {
  opacity: 1;
  max-height: 600px;
  // transform: translateY(0);
}
1
Parth Devloper