在我的AngularJS应用程序中,一旦用户在输入字段中提交值,我就会显示一个面板,当他们输入时,会向容器添加active
类。发生这种情况时,会添加许多CSS属性。我添加了transition property to apply to both
opacity and
background though it isn't applying the
transition`值,并且立即更改。
.scss文件
.container-add-patent {
.add-patent-panel {
.found-patent-panel {
opacity: 0;
background: green;
-moz-transition: all ease-in-out 10s;
-o-transition: all ease-in-out 10s;
-webkit-transition: all ease-in-out 10s;
transition: all ease-in-out 10s;
}
}
&.active {
.add-patent-panel {
.found-patent-panel {
background: red;
opacity: 1;
}
}
}
}
视图
<div class="container-add-patent" data-ng-class="{'active': foundPatent}">
<div class="add-patent-panel" role="dialog">
<div class="row found-patent-panel" data-ng-show="foundPatent">
//CONTENT
</div>
</div>
</div
最佳答案
因此,归结于使用ng-show
,后者应用了Pete所说的display: none
属性。当返回布尔值时,当ng-show
或ng-if
之类的指令适用时,Angular就是这些类。
如果为false,则ngIf
导致元素从DOM中完全删除。使用正确的选择器,您可以在元素进入时定位目标,而对于淡入淡出的过渡,我可以使用opacity
。 ngShow
默认的CSS属性是display: none
,您无法转换。以下是我所做的更改:
<div class="container-add-patent" data-ng-class="{'active': foundPatent}">
<div class="add-patent-panel" role="dialog">
<div class="row found-patent-panel" data-ng-if="foundPatent"> //changed to `ngIf`
//CONTENT
</div>
</div>
</div
.container-add-patent {
&.active {
.add-patent-panel {
.found-patent-panel {
&.ng-enter { //classes applied by angular
opacity: 0;
-moz-transition: all ease-in-out .25s .3s; //Added a delay of .3s
-o-transition: all ease-in-out .25s .3s;
-webkit-transition: all ease-in-out .25s .3s;
transition: all ease-in-out .25s .3s;
}
&.ng-enter.ng-enter-active {
opacity:1;
}
}
}
}
}
关于css - CSS过渡不适用于任何属性,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59714017/