css - Angular 带模态转换

Question

我正在尝试使用 Angular-Strap 来处理 Controller 的模式打开/关闭。然而，Angular-Strap 文档上给出的背景动画 CSS 不断给我带来错误——很确定我使用错了，但我似乎找不到太多关于如何使用 CSS 的信息。 Here's a plunker of the problem.看起来是 & 符号引起了问题。这是 Angular-strap 文档中给出的代码:

.modal-backdrop.am-fade {
    opacity: .5;
    transition: opacity .5s linear;
    &.ng-enter {
        opacity: 0;
        &.ng-enter-active {
            opacity: .5;
        }
    }
    &.ng-leave {
        opacity: .5;
        &.ng-leave-active {
        opacity: 0;
        }
    }
}

编辑:为了进一步澄清，打开/关闭模式不会给我带来问题。 CSS 实际上似乎确实有效，直到它到达 &.ng-enter。

Answer 1

将 CSS 更改为如下所示:

.modal-backdrop.am-fade {
    opacity: .7;
    transition: opacity .35s linear;
}
.modal-backdrop.am-fade.ng-enter {
    opacity: 0;
}
.modal-backdrop.am-fade.ng-enter.ng-enter-active {
    opacity: .5;
}

.modal-backdrop.am-fade.ng-leave {
    opacity: .5;
}
.modal-backdrop.am-fade.ng-leave.ng-leave-active {
    opacity: 0;
}