1

由于某种原因，持续时间有效，但动画无效。也无法让 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 1.8.2 在 jQuery UI 1.9.1（完整构建）之前被加载，jQuery 被加载到 中scope，并且没有重复的脚本调用。

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

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

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

谢谢！

4

2 回答 2

0

display:none如果你有-> CSS 将不会转换display:block

请参阅此其他 SO 问题

于 2013-01-05T05:45:06.973 回答
0

出于某种原因，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;
于 2012-12-12T23:11:02.303 回答