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 推迟通过添加一些中间类来设置属性，以便完成动画。这是nice tutorial this one。

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

3）如果您不想使用angular-animate库，则需要使用ng-class。

<强> Example with ng-animate

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

1 个答案: