For some reason the duration works, but not the animation. Also wasn't able to get the Angular-ui ui-animate to work either.
Just doing a simple call for testing first;
$('#event-modal').toggleClass('active', 500);
The duration works, but not the animation.
CSS:
#event-modal {
position:absolute;
top: 20%;
left: 30%;
width:0;
height:0;
z-index:1029;
background:#fff;
border-radius:5px;
display:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-box-shadow: 3px 6px 11px 3px rgba(0,0,0,0.25);
-moz-box-shadow: 3px 6px 11px 3px rgba(0,0,0,0.25);
box-shadow: 3px 6px 11px 3px rgba(0,0,0,0.25);
}
#event-modal.active { display:block;width:100%; height:100%; } /* Or a hard pixel value */
Confirmed that jQuery 1.8.2 is being loaded before jQuery UI 1.9.1 (complete build), jQuery's being loaded into the scope, and that there are no duplicate script calls.
Also doing $scope.$apply() after my call.
If I try ui-animate using angular-ui, it doesn't add the class to the element, once again confirmed that the scripts are being called and in the correct order.
I can post more code if needed.
Thanks!
For some reason the jQuery fullCalendar (the clickedEvent is what's triggering my popup) set a visibility: hidden inline, but it didn't show up in the Chrome inspector unless I manually edited the element. Real weird. Just had to do a simple override.
#event-modal.active {
z-index:1029;
opacity:1;
width:260px;
height:489px;
visibility: visible !important;
&.full-view {
width:100%;
height:100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
CSS will not transition if you have display:none -> display:block