angular-strap modal transitions

Question

I'm trying to use Angular-Strap to handle modal opening/closing from the controller. However the backdrop animation CSS given on the Angular-Strap docs keeps giving me errors - pretty sure I'm using it wrong, but I can't seem to find much info on how to use the CSS. Here's a plunker of the problem. It seems like it's the ampersands causing problems. Here is the code given on the angular-strap docs:

.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;
        }
    }
}

Edit: To further clarify, opening/closing the modals doesn't cause me problems. The CSS actually does seem to work until it gets to the &.ng-enter.

Answer 1

Changed CSS to look like so:

.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;
}