javascript - Fade-out and fade-in transition not working on ng-hide -

i'm developing application button clicked hides or shows specific element.

i'm achieving ng-hide angularjs. reason transition isn't working correctly. i'm quite new transitions css3 doing wrong?

all wish smooth fade in fade out effect appearance doesn't seem un-natural

css3

#custom-url{     -webkit-transition: 2s ease;            transition: 2s ease; } #custom-url .ng-hide{     opacity: 0; } 

html

<input ng-model="custom_url" id="custom-url" ng-show="custommode" type="text" placeholder="place custom url text here" class="ng-hide form-control"/> <button class="btn btn-success" ng-click="custommode = !custommode">make own url <b class="glyphicon glyphicon-heart"></b></button></div> 

angularjs

(function(angular) {     angular.module('urlshortener', [])         .controller('shortenercontroller', function($scope){             $scope.custommode = false;         }) })(window.angular); 

plunker

can ?

you have couple of issues here.

1) when use ng-show/ng-hide applies class .ng-hide on element sets display property none , property cannot animated hence opacity rule not apply. in order use animation ng-show/ng-hide need use ng-animate defers setting property adding intermediate classes in order animation complete. here nice tutorial this one.

2) ng-hide applied on element not on descendant, hence rule #custom-url .ng-hide have no effect. should #custom-url.ng-hide instead.

3) if not wish use angular-animate library need use ng-class instead.

example ng-animate