delay ng-hide execution with setTimeout

Question

demo: http://plnkr.co/edit/EWOvKsTEutiveMEAGTKf?p=preview

I wish to add a class that strike the text before it's gone, so I think of how to delay the task.done..

<li ng-repeat="task in tasks" ng-hide="task.done">
<input type="checkbox" ng-model="task.done"/>
  {{task.name}}
</li>

Answer 1

This is what ngAnimate was made for. You can use CSS transitions as well to make things relatively simple.

.animate-show {
  transition: all linear 0.5s;
  opacity: 1;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
  display: list-item !important;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
  text-decoration: line-through;
}

.animate-show.ng-hide {
  opacity:0;
}

You just have to include the ngAnimate script and module too.

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

Answer 2

.btn.ng-animate { transition:0s none;
       -webkit-transition:0s none;
       animation: 0s none;
       -webkit-animation: 0s none; }