淡出和淡入过渡不适用于ng-hide

Question

I'm developing an application where a button is to be clicked which then hides or shows a specific element.

I'm achieving this with ng-hide from AngularJS. For some reason the transition isn't working correctly. I'm quite new to transitions with CSS3 so what am I doing wrong?

All I wish for it to do is a smooth fade in fade out effect so the appearance doesn't seem so un-natural

CSS3

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

HTML

<input ng-model="custom_url" id="custom-url" ng-show="customMode" type="text" placeholder="Place your custom URL text here" class="ng-hide form-control"/>
<button class="btn btn-success" ng-click="customMode = !customMode">Make my 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 anyone help ?

Answer 1

You have couple of issues here.

1) When you use ng-show/ng-hide it applies class .ng-hide on the element which sets the display property to none and that is a property which cannot be animated hence your opacity rule does not get apply. In order to use the animation with ng-show/ng-hide you need to use ng-animate which defers setting the property by adding some intermediate classes in order for animation to complete. Here is a nice tutorial also this one .

2) ng-hide is applied on the element itself not on its descendant, hence your rule #custom-url .ng-hide will have no effect. It should actually be #custom-url.ng-hide instead.

3) If you do not wish to use angular-animate library then you would need to use ng-class instead.

Example with ng-animate