jQuery UI的toggleClass動畫Angularjs

工作不出於某種原因，持續時間工作，但不是動畫。也無法讓Angular-ui ui-animate也能工作。jQuery UI的toggleClass動畫Angularjs

只是做一個簡單的通話測試第一;

$('#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()。

如果我採用了棱角分明的UI界面嘗試，動畫，它不添加類的元素，再一次證實了腳本調用，並以正確的順序。

如果需要，我可以發佈更多的代碼。

謝謝！

來源

2012-12-12 Christopher Marshall

你能發佈的jsfiddle所以我們可以看到這個動作？ – Caleb

依賴性的數目將不適合用於小提琴。我會在後面發佈我不得不做的事情。 –

由於某種原因，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-12 23:11:02