我正在开发一个可以点击按钮的应用程序 然后隐藏或显示特定元素。
我通过 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);
有人能帮忙吗?
最佳答案
这里有几个问题。
1) 当您使用 ng-show/ng-hide 时,它应用类 .ng-hide
在设置 display
的元素上属性(property)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
相反。
关于javascript - 淡出和淡入过渡不适用于 ng-hide,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31352522/