angularjs ngHide delayed with ngShow

Question

Good morning, i have a field, when it is viewed it is a label, when it is modified it is an input field, i trigger this with ng-show and ng-hide and a button that enables a boolean value. When i activate the editing mode the label hides and the input field shows, it is in realtime, when i click cancel and switch the boolean, the label appears but the input field takes some time to hide, so i have a very bad visual effect. here some code

<input ng-model="name" ng-show="editing">
<label ng-hide="editing">{{name}}</label>

<button ng-click="editing=true">Edit</button>
<button ng-click="editing=false">Cancel</button>

is there a way to fix this issue?

Thank you

Probably we need to see your whole code - please post something like a [jsFiddle](http://jsfiddle.net/) that demonstrates your issue. — spirulence, Jan 23 '15 at 22:52
Agreed; don't seem to be able to reproduce this issue on my own — Explosion Pills, Jan 23 '15 at 22:56
this is jsFiddle http://jsfiddle.net/6qrv23v0/ here the effect is not visible, i think that i have the effect because i have a big controller and a lot of things into my dome (it is a full application). — CaTourist, Jan 23 '15 at 23:00

score 28 · Accepted Answer · answered Jan 23 '15 at 23:03

28

do you have ngAnimate included?

if so, this can happen. At our projects we declare and use a class on every dom element where we want to animate, and we tell angular to animate just those elements in the config callback:

$animateProvider.classNameFilter(/animate/);

answered Jan 23 '15 at 23:03

Ins

808
6
13

yes i have ngAnimate and boostrap too, if i remove css classes from input field it doesn't happen – CaTourist Jan 23 '15 at 23:07
i also removed the $animate from controller, but the problem persists – CaTourist Jan 23 '15 at 23:09
1

that is because ngAnimate uses timeout to leave time for the animations, the fast and dumb way to test this, would be to remove ngAnimate from the dependent module lists, but if you want to handle this permanently, you should use the option that I mentioned in the answer – Ins Jan 23 '15 at 23:10
i removed the ngAnimate from app module loading, i'm not using animate effects, but i have ever the same problem. can it be thet angularjs bootstrap ui uses animate itself? – CaTourist Jan 23 '15 at 23:12
WONDERFUL, i applied your filter and it works perfectly now, i solved a lot of ui problems, thank you very much @Ins – CaTourist Jan 23 '15 at 23:20
as I see, it does not us ngAnimate, are you sure there is no dependency declaration at any of your modules? if you ask for $animate in your controller, you should get an error, does this happen? – Ins Jan 23 '15 at 23:21
oh, great! :D that means, some of your modules dependent on ngAnimate – Ins Jan 23 '15 at 23:22
I have only one problem, i'm using the angularjs-toaster plugin and i tried in all ways but the animate class applied to the toaster html code or to the container doesn't work. – CaTourist Jan 27 '15 at 10:07
1

This answer is amazing. Should be common knowledge. – Z2VvZ3Vp Oct 27 '15 at 21:24
I really want to make love with you right now. Thanks so much, this improved speed soooo heavy! OMG! – Hirbod Dec 27 '15 at 20:07
Awesome answer! This made it easy for me to fix the delays I was seeing when upgrading from Angular 1.2.x to 1.4.x. – Eric Olson Jan 04 '16 at 16:20
ui.bootstrap includes ngAnimate. Adding $animateProvider to my config and adding the classNameFilter solved my ng-hide delay issue wonderfully! – BuffMcBigHuge Aug 05 '16 at 13:57

score 3 · Answer 2 · answered Apr 26 '16 at 15:01

I had the same problem all the time I had to elements with the same var to hide/show (because ng-animate) , this happens with ng-show / ng-hide / ng-if and maybe also with ng-switch but not with ng-class. So a quick fix is change your code for:

<input ng-model="name" ng-class="{'ng-hide':!editing}">
<label ng-class="{'ng-hide':editing}">{{name}}</label>

<button ng-click="editing=true">Edit</button>
<button ng-click="editing=false">Cancel</button>

score -2 · Answer 3 · answered Jan 23 '15 at 23:01

Your code as is has no problem, and as you can see in my snippet it is working as expected. You haven't found your problem yet, you need to give us more HTML and code.

angular.module('myApp', []).controller('myController', function($scope) {
  $scope.editing = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <input ng-model="name" ng-show="editing">
  <label ng-hide="editing">{{name}}</label>

  <button ng-click="editing=true">Edit</button>
  <button ng-click="editing=false">Cancel</button>
</div>

here the effect is not visible, i think that i have the effect because i have a big controller and a lot of things into my dome (it is a full application). — CaTourist, Jan 23 '15 at 23:02

angularjs ngHide delayed with ngShow

3 Answers3

Linked