Question

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;
}

Answer 1

您需要在动画中加入ng-hide类看看这个，这是为了你想隐藏任务而不是删除它们

http://plnkr.co/edit/xrKfNqaTxNL6xw1NBAkO?p=preview

我把你的例子分成了这个使用ng-hide ng-hide-add

Answer 2

这种情况正在发生，因为您只是隐藏它，而不是删除它。

在这种情况下，您需要使用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

编辑 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

Answer 3

切换复选框只是隐藏项目。但是del()函数会从范围中删除项目。

Answer 4

从ng-hide="task.done"移除<li>并使用ng-if="!task.done"

检查出来

<强> Working Demo

<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>

在我的情况下，ngghnimated on nghide不起作用

4 个答案: