淡出和淡入转换无法在ng-hide上工作

Question

我正在开发一个应用程序，在该应用程序中点击一个按钮，然后 隐藏或显示特定元素。

我用AngularJS的ng-hide实现了这一点。出于某种原因，转换无法正常工作。我很新与CSS3转换，所以我做错了什么？

所有我希望它做的是淡出效果平稳淡出所以外观显得不那么不自然

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

谁能帮助？

Answer 1

这里有几个问题。

1）当您使用NG-显示/ NG隐藏它其中display属性设置为none的元素应用.ng-hide类，这是它不能动画因此您的透明度规则没有得到应用的属性。为了与ng-show/ng-hide一起使用动画，您需要使用ng-animate，其中推迟通过添加一些中间类来完成动画设置。这里是nice tutorial也this one。

2）ng-hide适用于元素本身而不是其后代，因此您的规则#custom-url .ng-hide将不起作用。它实际上应该是#custom-url.ng-hide。 3）如果你不想使用angular-animate库，那么你需要使用ng-class来代替。

Example with ng-animate