Javascript 淡出和淡入过渡不适用于ng隐藏

我正在开发一个应用程序，其中一个按钮将被单击 然后隐藏或显示特定元素

我通过ng hide from AngularJS实现了这一点。由于某些原因，转换无法正常工作。我对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>

---

有人能帮忙吗？

这里有几个问题

1） 使用ng show/ng hide时，它会对元素应用class

.ng hide

，该元素将

显示

属性设置为

无

，并且该属性无法设置动画，因此不透明度规则不会应用。要将动画与

ng show/ng hide

一起使用，需要通过添加一些中间类来延迟属性设置，以便动画完成。这里还有一个例子

2）

ng hide

应用于元素本身而不是其子元素，因此您的规则

#自定义url.ng hide

将无效。它实际上应该是

#custom url.ng hide

3） 如果不希望使用

angular animate

库，则需要使用

ng class

---

这是一个很好的记录在案的答案。非常感谢。

(function(angular) {
    angular.module('urlShortener', [])
        .controller('shortenerController', function($scope){
            $scope.customMode = false;
        })
})(window.angular);