Question

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!

Answer 1

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;