淡出和淡入转换不工作的ng-隐藏

Question

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

我正在用ng- AngularJS来实现这一点。由于某种原因，转换不能正常工作。我对CSS3的转换非常陌生，所以我做错了什么？

我只希望它有一个平滑的淡出效果，这样外观就不会显得那么不自然了。

CSS3

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

<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);

http://plnkr.co/edit/fNU1Q8evK2QiGBQgL8nF?p=preview

有人能帮忙吗？

Answer 1

你这里有几个问题。

1)当您使用ng-show/ng-hide时，它将类.ng-hide应用于将display属性设置为none的元素，该属性不能被动画化，因此您的不透明度规则不会被应用。为了在ng-show/ng-hide中使用动画，您需要使用ng-animate，它通过添加一些中间类来延迟设置属性，这样动画才能完成。这是一个不错的教程也是这一个。

2) ng-hide应用于元素本身，而不是其后代，因此您的规则#custom-url .ng-hide将没有任何效果。它实际上应该是#custom-url.ng-hide。

3)如果不希望使用angular-animate库，则需要使用ng-class。

使用ng-动画的示例