不能使用ngShow動畫自定義指令

Question

我試圖使用ng-show，在Angular網站上顯示的示例（示例位於頁面的最底部）顯示自定義模態指令。但是，我沒有任何運氣讓它工作。

我正在使用Angular 1.3.x與Bootstrap 3.3.x.我沒有使用Angular UI Bootstrap，因爲自定義模態指令更符合我的需求。

這裏是我到目前爲止有：

Modal.js：

angular.module('plunker', []) 
    .directive('myModal', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     templateUrl: 'modal.html', 
     controller: 'ModalCtrl', 
     link: function(scope, element, attrs) { 
     scope.showModal = false; 

     if (attrs.title === undefined) { 
      scope.title = 'Modal Title Placeholder'; 
     } else { 
      scope.title = attrs.title; 
     } 

     scope.$watch('showModal', function(isHidden) { 
      if (isHidden) { 

      } else { 

      } 
     }); 
     } 
    }; 
    }).controller('ModalCtrl', ['$scope', 
    function($scope) { 
     $scope.$open = function() { 
     $scope.showModal = true; 
     }; 

     $scope.$close = function() { 
     $scope.showModal = false; 
     }; 
    } 
    ]); 

modal.html：

<div role="dialog" tabindex="-1" class="modal modal-fade" ng-show="showModal"> 
    <div class="modal-backdrop" style="height: 100%"> </div> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h3 class="modal-title">{{title}}</h3> 
      </div> 
      <div class="modal-body"> 
       <div class="content" ng-transclude></div> 
      </div> 
     </div> 
    </div> 
</div> 

modal.css：

.modal-fade { 
    opacity: 1; 
    display: block !important; 
} 

.modal-fade .ng-hide-add .ng-hide-add-active, 
.modal-fade .ng-hide-remove .ng-hide-remove-active { 
    -webkit-transition: all linear 1s; 
    -moz-transition: all linear 1s; 
    transition: all linear 1s; 
} 

.modal-fade .ng-hide { 
    opacity: 0; 
    display: none; 
} 

index.html：

<my-modal title="Example Modal"> 
    <p>Some text</p> 
    <button type="button" class="btn btn-primary" ng-click="$close()">Close</button> 
</my-modal> 
<button type="button" class="btn btn-primary" ng-click="$open()">Open Modal</button> 

其他一切正常，即模態顯示並可以關閉，但沒有動畫。

這是Plunkr指向代碼的鏈接。

Answer 1

AngularJS的動畫掛鉤在一個名爲ngAnimate的獨立模塊中實現。

加載腳本：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-animate.min.js"></script> 

並添加模塊：

angular.module('plunker', ['ngAnimate']) 

其次，你需要爲鄰接CSS類形成正確的選擇。

相反的：

.modal-fade .ng-hide { 

務必：

.modal-fade.ng-hide { 

第一個是器的新生代選擇，這將選擇具有類ng-hide並後裔與類modal-fade元素的元素。

第二個將選擇兩個類的元素，這是你需要的。

對於這種情況你需要的是：

.modal-fade { 
    -webkit-transition: all linear 1s; 
    -moz-transition: all linear 1s; 
    transition: all linear 1s; 
    display: block; 
} 
.modal-fade.ng-hide { 
    opacity: 0; 
} 

的display: block只需要在引導的modal類中重寫display: none。

演示：http://plnkr.co/edit/h0tNOn6Xj31OGmHqulr5?p=preview