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

标签 javascript angularjs css

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

我通过 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

有人能帮忙吗?

最佳答案

这里有几个问题。

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相反。

Example with ng-animate

关于javascript - 淡出和淡入过渡不适用于 ng-hide,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31352522/

相关文章:

javascript - 在 jquery 中设置背景图像不起作用

javascript - ES6 - 可以从对象解构为另一个对象属性吗?

javascript - 使用 angularjs 在标记中使用范围变量

CSS:以类似磁贴的样式显示未排序的列表

css - css 属性 'filter: xray;' 的替代方案或解决方法

html - 自动添加更多内容/字段(Wordpress)

php - 如何将数组的php数组传递给Javascript

javascript - 获取 2 个单词之间的字符串,其中也包含该单词

javascript - IE 遗漏标题 - angular $http

javascript - 在解析中检索信息