web-dev-qa-db-ja.com

アニメーション、モーダル、角度UIをオフにする

Angle-uiのモーダルディレクティブのアニメーションをオフにすることは可能ですか？ http://angular-ui.github.io/bootstrap/

オプションが見つかりません。ソースを変更する必要がありますか？または、カスタマイズするときにベストプラクティスはありますか？

angular-uiangular-ui-bootstrap
31
Joe

現在、bootstrapクラスはディレクティブに埋め込まれているため、オーバーライドする必要があります。その垂直「ドリフト」をモーダルウィンドウの位置に配置したくない場合は、CSSに次の2つのクラスを配置します：

.modal.fade {
  opacity: 1;
}

.modal.fade .modal-dialog, .modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

ここで達成することは、既存の翻訳の否定です。理想的ではありませんが、トリックを行います。

34
beauXjames

animation（タイプ：boolean、デフォルト：true）-falseに設定して、新しいモーダル/背景のアニメーションを無効にします。既に表示されているモーダル/背景のアニメーションを切り替えません。

var modalInstance = $uibModal.open({
  animation: false
15
Mo.

アニメーションをオフにする簡単な方法は、モーダルに！importantスタイルを追加することです。

すべてのモーダル用

このCSSクラスを使用して、すべてのモーダルに対してグローバルに行うことができます（cssのどこにでも配置できます）。

.modal {
   top: 25% !important;
   opacity: 1 !important;
}

「上からスライド」アニメーションと不透明度アニメーションも削除されます。個人的には、最初のもののみを削除し、top：25％！important;のみを使用することを好みます

背景アニメーションを削除することもできますgloballyこのクラスを使用して（CSSの任意の場所に配置します）：

.modal-backdrop {
   opacity: 0.8 !important;
}

特定のモーダル用

windowClass paramを使用して、特定のモーダルのアニメーションを削除できます。

.no-animation-modal {
  top: 25% !important;
  opacity: 1 !important;
}

WindowClassの使用：

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: ModalInstanceCtrl,
  windowClass: 'no-animation-modal'
});
7
guya

完全な答えはありませんが、私は同様の問題を抱えており、私はチャイムだと思っていました。これは、angular-ui/bootstrap 0.5で可能であったことを知っています。 0.6に重大な変更が加えられている可能性があり、答えを見つけようとしていますが、ドキュメントがかなり不足しています。

ここ は0.5の例です。 backdropFadeのようなオプションを設定できますが、0.6では同等のオプションが見つかりません。 $ dialogProvider の削除に関連している可能性があります。

0
Kenjamin