Javascript 无法使用ngShow设置自定义指令的动画

我正在尝试使用ng show制作自定义模态指令的动画，遵循网站上显示的示例（示例位于页面底部）。然而，我没有任何运气让它工作

我使用Angular 1.3.x和Bootstrap 3.3.x。我不使用Angular UI引导，因为自定义模式指令更适合我的需要

以下是到目前为止我得到的信息：

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>

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>

一些文本

接近
开放模态

其他一切工作正常，即模态显示并可以关闭，但没有动画

---

这里有一个指向代码的链接

AngularJS的动画挂钩在名为

ngAnimate

的单独模块中实现

加载脚本：

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

其次，您需要连接CSS类以形成正确的选择器

而不是：

.modal-fade .ng-hide {

做：

第一个是Decentant选择器，它将选择具有类

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

---

演示：

你能把它扔到plunkr或JSFIDLE中并链接起来吗？当然！刚刚在上面添加了plunkr链接。谢谢！这就解决了问题。我不知道ngAnimate在另一个图书馆。没有看到文档中提到的。还有一个问题：Angular如何知道何时应用转换？当动画被激活时，它是否扫描元素所拥有的类的CSS以获得“transition”标记？不客气：）是的，它扫描元素样式以获得CSS转换/动画持续时间和延迟。

.modal-fade .ng-hide {

.modal-fade.ng-hide {

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