CSS переход не работает ни на каких свойствах

Question

В моем приложении AngularJS я отображаю панель, как только пользователь отправляет значение в поле ввода, а когда это происходит, в контейнер добавляется класс active. Когда это происходит, добавляются многочисленные свойства CSS. Я добавил значения transition property to apply to both opacity and background though it isn't applying the transition` и сразу же изменился.

.s css file

.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

Answer 1

Таким образом, это было до использования ng-show, которое применяет свойство display: none, которое указал Пит. Это классы, которые 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;
                }
            }
        }
    }
}