无法使用 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>

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

这里有一个Plunkrlink的代码.

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 classes 以形成正确的 selector。

而不是：

.modal-fade .ng-hide {

做：

.modal-fade.ng-hide {

第一个是后代 selector，它将 select 具有 class ng-hide 的元素并且是具有 [=49= 的元素的后代] modal-fade.

第二个将 select 具有两个 class 的元素，这就是您所需要的。

对于这种情况，您只需要：

.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 只需要从 Bootstrap.

中的 modal class 覆盖 display: none

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

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

Cannot Animate Custom Directive with ngShow

javascript

css

twitter-bootstrap

angularjs

ng-animate