Question

当我包含ng-show 显示属性的css生效但我想更改不透明度属性。在angular的文档中，写入了定义你自己的自定义css，使用重要的将覆盖效果，但它不起作用。

<p ng-show="registrationForm.firstname.$invalid" class="help-block colorred">Enter only alphabets</p>
 <style>
 .help-block.ng-show{ opacity:1 !important;}
 .help-block.ng-hide{opacity:0 !important;}

我是angular.js的新手。

任何类型的链接或建议都会有所帮助

Answer 1

请注意，动画应用于ng-show或ng-hide的状态，例如具有ng-hide的元素当前是否隐藏（解析为true）与否（解析为false），对于具有ng-show的元素是否相同。

因此，对于ng-hide的元素，请将CSS更改为：

.help-block.ng-hide-add, .help-block.ng-hide-remove {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;
}

.help-block.ng-hide-add.ng-hide-add-active,
.help-block.ng-hide-remove {
  opacity:0;
}

.help-block.ng-hide-add,
.help-block.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

Answer 2

我有同样的问题; ng-hide按下显示无。可以在css类ng-hide上放置显示。

.help-block.ng-hide {
    opacity: 0;
    display:block !important;
}

关于！重要，有文档：

通过使用！important，尽管CSS选择器特性之间存在任何冲突，但show和hide行为仍将按预期工作。

包含ng-show / hide时的Angular，更改opacity属性

2 个答案: