angular ng-class appending classes does not trigger css3 transition - angularjs

Question

I have created custom modal directive in angular but it seems transition is not working and i can't figure out why.
Inside my directive isolated scope i have method toggleModal() which is switching modalState to true / false. So everything is basically working except animation
HTML:
<span class="glyphicon glyphicon-edit" ng-click="toggleModal()"></span>
<div class="annotation-panel"
ng-class="{'annotation-panel-active' : modalState == true, 'annotation-panel-inactive' : modalState == false}">
<div class="annotation-modal" ng-class="{'active':modalState == true, 'inactive':modalState == false}">
<button type="button" class="btn btn-default" ng-click="toggleModal()">Close</button>
</div>
</div>
CSS:
.annotation-panel{
display: none;
position: fixed;
top:0;
left:0;
z-index: 1000;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
}
.annotation-panel-active{
display: block!important;
}
.annotation-panel-inactive{
display: none!important;
}
.annotation-modal{
position: fixed;
z-index: 1001;
left:10vw;
top: 0;
width: 80vw;
height: auto;
overflow-y: scroll;
opacity: 0;
background-color: whitesmoke;
transition: all 0.5s linear;
}
.annotation-modal.active{
top: 10vh;
opacity: 1;
}
.annotation-modal.inactive{
top: 0;
opacity: 0;
}
So basically using ng-class im switching between two classes
.active and .inactive but it seems transition does not animate the change in the classes, i think i have some general mistake but can't find it. I don't use ngAnimate because i'm making module so i don't a lot of dependencies and that's why i'm making it custom with classes

Answer 1

You are hiding the annotation-panel with display:none instantly when the state changes to inactive, so the contained annotation-modal wont be visible.
The use of ng-animate here would be to only apply ng-hide (and thus, display:none) when the animation has finished.
Without that, you need to use a different method to hide the panel after the animation has finished. Here is one solution with moving the panel offscreen. Notice how the transition-delay in inactive state matches the animation length of the modal fadeout. Also, by only having the transition on the inactive state, when the panel becomes active, it moves instantly to the viewport.
.annotation-panel{
position: fixed;
top: -2000px;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
}
.annotation-panel-active{
top: 0;
}
.annotation-panel-inactive{
transition-property: top;
transition-delay: 0.5s;
transition-duration: 0s;
}
.annotation-panel{
position: fixed;
top: -2000px;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
}
.annotation-panel-active{
top: 0;
}
.annotation-panel-inactive{
transition-property: top;
transition-delay: 0.5s;
transition-duration: 0s;
}
.annotation-modal{
position: fixed;
z-index: 1001;
left:10vw;
top: 0;
width: 80vw;
height: auto;
overflow-y: scroll;
opacity: 0;
background-color: whitesmoke;
transition: all 0.5s linear;
}
.annotation-modal.active{
top: 10vh;
opacity: 1;
}
.annotation-modal.inactive{
top: 0;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<span class="glyphicon glyphicon-edit" ng-click="modalState =!modalState">click</span>
<div class="annotation-panel"
ng-class="{'annotation-panel-active' : modalState == true, 'annotation-panel-inactive' : modalState == false}">
<div class="annotation-modal" ng-class="{'active':modalState == true, 'inactive':modalState == false}"> helloo
<button type="button" class="btn btn-default" ng-click="modalState = false">Close</button>
</div>
</div>
</div>

Answer 2

You should go for ng-hide if you just have to make display none for the element
here are some animation css for that
//
//a working example can be found at the bottom of this page
//
.my-element.ng-hide-add, .my-element.ng-hide-remove {
/* this is required as of 1.3x to properly
apply all styling in a show/hide animation */
transition: 0s linear all;
}
.my-element.ng-hide-add-active,
.my-element.ng-hide-remove-active {
/* the transition is defined in the active class */
transition: 1s linear all;
}
.my-element.ng-hide-add { ... }
.my-element.ng-hide-add.ng-hide-add-active { ... }
.my-element.ng-hide-remove { ... }
.my-element.ng-hide-remove.ng-hide-remove-active { ... }
Link for more details animations