[英]Can't seem to get ngAnimate to work on an ng-repeat
I have the following snippet of HTML: 我有以下HTML片段:
<div ng-app ng-controller="mainCtrl">
<div ng-repeat="item in items" ng-mouseenter="item.showRemove = true" ng-mouseleave="item.showRemove = false" class="repeated-item">
<span class="remove-item glyphicon glyphicon-remove" ng-show="item.showRemove" ng-click="removeItem(item)"></span>
<div class="h3">{{item.title}}</div>
<p>{{item.description}}</p>
</div>
</div>
The following CSS is applied to the markup: 以下CSS应用于标记:
body { padding: 15px; }
.repeated-item {
padding: 10px;
margin-bottom: 15px;
border-left: solid 1px #ccc;
border-top: solid 1px #ccc;
border-radius: 10px;
background-color: #eee;
position: relative;
}
.repeated-item:hover { background-color: #ddd; }
.remove-item {
float: right;
cursor: pointer;
color: #b00;
font-size: x-large;
}
.h3 {
border-bottom: dotted 1px #bbb;
}
.repeated-item.ng-leave {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:1;
}
.repeated-item.ng-leave.ng-leave-active {
opacity:0;
}
Lastly, I have the following javascript: 最后,我有以下javascript:
function mainCtrl($scope) {
$scope.items = [
{
title: 'Star Trek: The Original Series',
description: 'brevity brevity...'
},
{
title: 'Star Trek: The Next Generation',
description: "brevity brevity..."
},
{
title: 'Star Trek: Deep Space Nine',
description: "brevity brevity..."
},
{
title: 'Star Trek: Voyager',
description: "brevity brevity..."
},
{
title: 'Star Trek: Enterprise',
description: "brevity brevity..."
}
];
$scope.removeItem = function (itemToRemove) {
var index = $scope.items.indexOf(itemToRemove);
if (index !== -1) {
$scope.items.splice(index, 1);
}
};
}
I'm creating this little demo simply to learn how to use ngAnimate. 我创建这个小演示只是为了学习如何使用ngAnimate。 However, the documentation on the web seems a little lacking and I can't seem to figure out what I'm doing wrong.
但是,网络上的文档似乎有点不足,我似乎无法弄清楚自己在做什么错。 I'm using this page to apply a fade-out animation to the items in the ng-repeat.
我正在使用此页面将淡出动画应用于ng-repeat中的项目。 Nothing I do seems to work.
我似乎无济于事。 I've given the repeated item it's own class and I've applied the animation rules (yes I did include the ngAnimate file).
我已经给重复的项目提供了它自己的类,并且应用了动画规则(是的,我确实包含了ngAnimate文件)。 Everything works except the animation.
除动画外,其他所有功能均有效。
What am I doing wrong? 我究竟做错了什么?
Change <div ng-app ng-controller="mainCtrl">
to <div ng-app="ngAnimate" ng-controller="mainCtrl">
将
<div ng-app ng-controller="mainCtrl">
更改为<div ng-app="ngAnimate" ng-controller="mainCtrl">
Note the ngAnimate
. 注意
ngAnimate
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.