淡出和淡入過渡不適用於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-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-animate的示例