角度$ animate和指令行為不正確

Question

因此，要么就是我沒有得到它，要么文檔不完整，或者是其他原因，但是我似乎無法弄清楚我的代碼以及正在發生的事情。

我正在研究一個指令，該指令可動態創建一個疊加層並生成一個滑動菜單。 我已經針對幾個不同的問題和在線指南關注了解決方案。 我什至已經閱讀了有角度的文檔，但沒有任何效果。

我無法通過背景疊加層的初始創建。 這真令人沮喪。

首先單擊圖標按鈕

<i class='fa fa-bars' slider-menu></i>

然后應該激活Slider-menu指令，並且CSS應該接管。

slideMenu.js

angular.module('dt').directive('sliderMenu', SliderMenuDirective);

SliderMenuDirective.$inject = ['$document', '$rootScope', '$animate'];

function SliderMenuDirective($document, $rootScope, $animate){
    return {
        link : function(scope, element, attr){
            var body = $document.find('body').eq(0);
            element.on('mousedown', function(event){
                $animate.addClass(body, 'menu-overlay');                    
            });
        }
    }
}

的CSS

@keyframes menuOverlay{
    0% {
        background-color: rgba(0, 0, 0, 0);
    }

    100% {
        background-color: $navy-blue-alpha;
    }
}
.menu-overlay:after{
    content : "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 10;
    background-color: rgba(0,0,0,0);
    animation-name: menuOverlay;
}

在檢查初次點擊時，唯一發生的是body標簽獲得了data-ng-animate="1"的屬性。 然后什么也沒有發生。 我再次單擊，然后body標簽具有一個新的menu-overlay-add 。 我不知道會發生什么，我很失落。 有人可以幫我指出正確的方向，也許可以使動畫更清晰一些，或者告訴我我做錯了什么嗎？

Answer 1

on是jQuery / jqLit​​e方法，不會自動觸發摘要循環，這就是為什么Angular的動畫循環在您的示例中無法正常工作的原因。

您可以使用$apply ：

$ apply（）用於從角度框架外部以角度執行表達式。 （例如，來自瀏覽器DOM事件，setTimeout，XHR或第三方庫）。 因為我們正在調用角度框架，所以我們需要執行異常處理的適當范圍生命周期，並執行監視。

例如：

element.on('mousedown', function(event) {
  scope.$apply(function() {
    $animate.addClass(body, 'menu-overlay');
  });
});

您的動畫還需要指定持續時間：

animation-duration: 2s;

如果要保留最后一個關鍵幀的背景色，可以使用：

animation-fill-mode: forwards;

還是簡寫：

animation: menuOverlay 2s forwards;

演示： http ： //plnkr.co/edit/6zTMlsNkg1xvKJpLs8dN？p = preview