[英]Angular.js 1.4.2 CSS Animations not working for ng-show
I am trying to add a CSS animation to clicking on the buttons, so the data either fades in or not. 我正在尝试在按钮上添加CSS动画,因此数据不会淡入或淡出。 But currently clicking the buttons just instantly changes the class to and from ng-hide, so the animations never get called. 但是当前单击按钮只是立即将类更改为ng-hide,或将其更改为ng-hide,因此动画永远不会被调用。 I am trying to work based on the examples given on the Angular.js website here: https://docs.angularjs.org/api/ng/directive/ngShow 我正在尝试根据Angular.js网站上给出的示例进行工作: https ://docs.angularjs.org/api/ng/directive/ngShow
The plunker for the working code given on the website is here: http://plnkr.co/edit/2ZJ9pdUq1tXLbDLuShEV?p=preview 网站上提供的工作代码编码器位于此处: http ://plnkr.co/edit/2ZJ9pdUq1tXLbDLuShEV?p=preview
My code, which does not animate whatsoever for some reason, is here : http://plnkr.co/edit/vnvVUciM5qMVyqzv2nL0?p=preview 我的代码(出于某种原因无法进行动画处理)位于 : http : //plnkr.co/edit/vnvVUciM5qMVyqzv2nL0?p=preview
HTML: 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: 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: 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"}];
});
})();
It seems like in my code for some reason the element never gets the ng-hide-add or ng-hide-remove classes. 似乎在我的代码中,由于某种原因,该元素从未获得ng-hide-add或ng-hide-remove类。 Any ideas? 有任何想法吗? Thanks! 谢谢!
You need to inject ngAnimate into your app's module: 您需要将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"}];
});
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.