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 - ＆gt; CSS，则无法转换display:block

Refer to this other SO question

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

2 个答案: