After creating a custom modal directive in Angular, I am encountering an issue with the transition animation not working as expected. Within my directive's isolated scope, there is a method called toggleModal() that toggles the modalState between true and false. While the functionality works fine, the animation does not.
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;
}
Through the use of ng-class, I am switching between the .active and .inactive classes. However, it appears that the transitions are not properly animating the class changes. I suspect there may be a mistake in my approach, but I am unable to identify it. I have refrained from using ngAnimate to avoid unnecessary dependencies since I am developing a module, hence opting for a custom solution with classes instead.