在我的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-showng-if之类的指令适用时,Angular就是这些类。

如果为false,则ngIf导致元素从DOM中完全删除。使用正确的选择器,您可以在元素进入时定位目标,而对于淡入淡出的过渡,我可以使用opacityngShow默认的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/

10-12 12:38
查看更多