Angular.js 1.4.2 CSS 动画不适用于 ng-show答案

【问题标题】：Angular.js 1.4.2 CSS Animations not working for ng-showAngular.js 1.4.2 CSS 动画不适用于 ng-show
【发布时间】：2015-09-29 19:29:47
【问题描述】：

我正在尝试添加一个 CSS 动画来单击按钮，因此数据要么淡入要么不淡入。但是当前单击按钮只是立即将类更改为 ng-hide 和从 ng-hide 更改，因此永远不会调用动画。我正在尝试根据 Angular.js 网站上给出的示例进行工作：https://docs.angularjs.org/api/ng/directive/ngShow

网站上给出的工作代码的插件在这里： http://plnkr.co/edit/2ZJ9pdUq1tXLbDLuShEV?p=preview

我的代码，由于某种原因没有任何动画，在这里： http://plnkr.co/edit/vnvVUciM5qMVyqzv2nL0?p=preview

HTML：

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  <script src="http://code.angularjs.org/1.4.2/angular.js"></script>
  <script src="http://code.angularjs.org/1.4.2/angular-animate.min.js"></script>
  <script src="script.js"></script>

</head>
<body ng-app="assignment" ng-controller="AssignmentController as assignment">
  <button type="button" ng-click="current_question_id = 0">0</button>
  <button type="button" ng-click="current_question_id = 1">1</button>

  <div class="panel-body" id="form_content">
    <div ng-repeat="question in questions" ng-show="question.id == current_question_id" class="question-container">
      <div class="position-center">
        <div class="form-horizontal">
          <div class="form-group">
            <label for="question_question_{{ question.id }}" class="col-lg-2 col-sm-2 control-label">Question</label>
            <div class="col-lg-10">
              <input type="text" id="question_question_{{ question.id }}" name="questions[][question]" placeholder="Question" class="form-control" ng-value="question.question">
              <p class="help-block">{{ question.type }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

CSS：

.question-container {
  line-height: 20px;
  opacity: 1;
  padding: 10px;
}

.question-container.ng-hide-add.ng-hide-add-active,
.question-container:not(.ng-hide) {
  -o-transition: all linear 0.5s;
  -moz-transition: all linear 0.5s;
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
}

.question-container.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

JS：

(function(){
  var app = angular.module('assignment', []);
  app.controller('AssignmentController', function($scope, $http){
    $scope.questions = [{id: 0, question: "What is the capital of Greenland?", type: "Short Answer"},
    {id: 1, question: "Wtf is going on?", type: "Long Answer"}];
  });
})();

似乎在我的代码中，由于某种原因，元素永远不会获得 ng-hide-add 或 ng-hide-remove 类。有任何想法吗？谢谢！

【问题讨论】：

标签： javascript css angularjs css-animations

【解决方案1】：

您需要将 ngAnimate 注入到您应用的模块中：

(function(){
  var app = angular.module('assignment', ['ngAnimate']);
  app.controller('AssignmentController', function($scope, $http){
    $scope.questions = [{id: 0, question: "What is the capital of Greenland?", type: "Short Answer"},
    {id: 1, question: "Wtf is going on?", type: "Long Answer"}];
  });
})();

【讨论】：

该死的我就知道这很简单！谢谢！（我会在允许的时候接受）