时间戳

首页 > 解决方案 > CSS过渡不适用于任何属性

css - CSS过渡不适用于任何属性

问题描述

在我的 AngularJS 应用程序中，一旦用户在输入字段中提交了一个值，我就会显示一个面板，当他们这样做时，一个active类被添加到容器中。当发生这种情况时，会添加许多 CSS 属性。我已经添加了transition property to apply to both不透明and背景though it isn't applying the转换值，并且立即更改。

.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

标签： cssangularjssass

解决方案

所以归结为使用ng-showwhich 应用了display: nonePete 所说的属性。它是 Angular 在指令时应用的类，例如在返回布尔值时应用ng-show或应用。ng-if

如果为 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;
                }
            }
        }
    }
}

推荐阅读