jQuery UI toggleClass动画在Angularjs中不起作用

Question

由于某些原因，持续时间有效，但动画无效。也无法让Angular-ui ui-animate工作。

只是先做一个简单的测试调用；

$('#event-modal').toggleClass('active', 500);

持续时间有效，但动画无效。

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 */

确认在jQuery UI 1.9.1 (完整版本)之前加载jQuery 1.8.2，将jQuery加载到scope中，并且没有重复的脚本调用。

在我打完电话后，我也在做$scope.$apply()。

如果我使用angular-ui尝试ui-animate，它不会将类添加到元素中，再次确认脚本正在以正确的顺序被调用。

如果需要，我可以发布更多的代码。

谢谢!

Answer 1

出于某种原因，jQuery fullCalendar ( clickedEvent触发了我的弹出窗口)设置了一个内联的visibility: hidden，但它不会显示在Chrome检查器中，除非我手动编辑该元素。真的很奇怪。只需要做一个简单的重写。

#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;   

Answer 2

如果您有display:none -> display:block，CSS将不会转换。

Refer to this other SO question