角度のあるアニメートとディレクティブが正しく動作しない

Question

だから、私はそれを得ていないか、ドキュメントが不完全である、または何か他のものですが、私のコードを理解できないようで、何が起きているようです。

私は動的にオーバーレイを作成し、スライディングメニューを生成する命令に取り組んでいます。私は、いくつかの異なる質問とガイドで解決策を追跡しました。私は角度のあるドキュメントを読んでいて、何も動いていません。

バックグラウンドオーバーレイの初期作成に合格できません。これはイライラしています。

あなたは次にスライダーメニューディレクティブが有効にしなければなりませんし、CSSが引き継ぐ必要があるアイコンボタンを

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

をクリックして開始します。初期の

sliderMenu.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を使用することができます。

は

$が適用されます（） 角度枠組みの外側からの角度で式を実行するために使用されます。 （たとえば、ブラウザの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