Angular.js 1.4.2 CSS動畫不適用於ng顯示

我想添加一個CSS動畫來點擊按鈕，所以數據或者淡入或者淡出。但是，當前點擊按鈕只是立即改變了類和隱藏的類，所以動畫永遠不會被調用。我想基礎上，Angular.js網站在這裏給出的例子的工作：https://docs.angularjs.org/api/ng/directive/ngShow Angular.js 1.4.2 CSS動畫不適用於ng顯示

的網站上提供的工作代碼plunker是在這裏： 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-捉迷藏添加或NG隱藏，刪除類代碼。有任何想法嗎？謝謝！

來源

2015-07-10 user1032369

你需要注入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"}]; 
    }); 
})();

來源

2015-07-10 22:18:32 pro

哎呀我知道這是簡單的東西！謝謝！（我會在一分鐘後讓我接受） – user1032369

Angular.js 1.4.2 CSS動畫不適用於ng顯示

回答

相關問題