nghide上的ngAnimated在我的情况下不起作用
nghide上的ngAnimated在我的情况下不起作用
提问于 2014-05-15 23:15:16
http://plnkr.co/edit/cPyi8lukckyo9EFReI9V?p=preview
删除会逐渐消失，但不是当我点击复选框时，你知道我哪里错了吗？
<li class="task" ng-repeat="task in tasks" ng-hide="task.done">
<input type="checkbox" ng-model="task.done">
{{task.name}}
<button ng-click="del($index)">del</button>
</li>css
.task.ng-enter,
.task.ng-move {
-webkit-transition:0.25s linear all;
transition:0.25s linear all;
opacity:0;
}
.task.ng-enter.ng-enter-active,
.task.ng-move.ng-move-active {
opacity:1;
}
.task.ng-leave {
-webkit-transition:0.25s linear all;
transition:0.25s linear all;
opacity:1;
}
.task.ng-leave.ng-leave-active {
opacity:0;
}Stack Overflow用户
发布于 2014-05-15 23:29:22
发生这种情况是因为您只是隐藏了它，而不是删除它。
在这种情况下，您需要使用ng-if：
<body ng-controller="MainCtrl">
<li class="task" ng-repeat="task in tasks" ng-if="!task.done">
<input type="checkbox" ng-model="task.done">
{{task.name}}
<button ng-click="del($index)">del</button>
</li>
</body>Here's your demo
EDIT OP正在寻找复选框以应用删除线，暂停，然后淡出。
<body ng-controller="MainCtrl">
<li class="task" ng-repeat="task in tasks" ng-hide="task.done" ng-class="(task.done)?'strike':''">
<input type="checkbox" ng-model="task.done">
{{task.name}}
<button ng-click="del($index)">del</button>
</li>
</body>添加了以下CSS：
.task.ng-hide {
-webkit-transition: 0.25s linear all;
transition: 0.25s linear all;
opacity: 0;
}
.task.ng-hide-add {
-webkit-transition-delay: 2s;
transition-delay: 2s;
display: block !important;
}
.strike {
text-decoration: line-through;
}Demo v2
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23682308
复制相关文章
相似问题
腾讯云开发者
