Question

所以要么，我只是没有得到它或文档不完整，或其他东西，但我似乎无法弄清楚我的代码，以及发生了什么。

我正在制作一个动态创建叠加层的指令，以生成滑动菜单。我已经在网上跟踪了几个不同问题和指南的解决方案。我甚至读过角度文档，没有任何工作。

我无法通过背景叠加层的初始创建。这令人沮丧。

首先点击图标按钮

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

然后应该激活slider-menu指令并且css应该接管。

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 / jqLite方法，不会自动触发摘要循环，这就是为什么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

Angular $ animate和指令行为不正常

1 个答案: