UI Bootstrap windowClassでanimate.cssクラスを使用するときのモーダル遅延

Question

animate.css UI-Bootstrap windowClassオプションを使用すると問題が発生します。例えば

：モーダルが閉じているときにモーダルオープンは、しかし、遅延があるとき

vm.open = function() { 
     var modalInstance = $uibModal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     controllerAs: 'vm', 
     windowClass: 'animated zoomIn',  // Issue is over here. 
     resolve: { 
      items: function() { 
      return vm.items; 
      } 
     } 
     }); 

すべてが素晴らしく見えます。バックグラウンドのop ui-bootstrapはDOMから直ちに削除されますが、windowおよびbodyクラスを削除するのに遅延があります。

私は何を意味するかを説明するコードペンを作った。最初のボタンはスクリーンクラス（Work 100％）を持たない通常のモーダルです。他の2つの 'アニメーション'ボタンは、animate.cssクラスを使用する場所です。

http://codepen.io/DickSwart/pen/XjbkYw

あなたは、コードを調べる場合は、遅延が表示されたり、アニメーションのモーダルの1を閉じて、すぐに別のボタンをクリックしようとすると、何も起こりません。

Answer 1

私もこの問題に気づきました。問題は、UIモーダルの背景がモーダルよりも速くアニメーション化されていることです。フェードインとフェードアウトに使用される背景クラスをオーバーライドしてみてください。

CSSクラスは

.fade.in { /*override transition time here */} 

と消えているため1あなたはまたに特別なクラスを添付することができ、直接クラスを上書きしたくない場合は

.fade.out { /*override transition time here */} 

をする必要がありますする必要がありますモーダルバックグラウンドオプションを使用して

backdropClass : 'mySpecialClass'