CODEWITHSUNDEEP
javascriptcssangularjs
user3522722
user3522722

Reputation: 115

delay ng-hide execution with setTimeout

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>

Upvotes: 0

Views: 1183

Answers (2)

Jijo Paulose
Jijo Paulose

Reputation: 1956

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

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191799

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

Upvotes: 2

Related Questions