Angular $animate 和指令行为不正常

Posted 2023-03-06

【中文标题】Angular $animate 和指令行为不正常

【英文标题】：Angular $animate and directive not behaving properly

【发布时间】：2017-05-19 08:42:28

【问题描述】：

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

我正在研究动态创建覆盖并生成滑动菜单的指令。我已经在线跟踪了几个不同问题和指南的解决方案。我什至阅读了角度文档，但没有任何效果。

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

您首先单击图标按钮

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

然后滑块菜单指令应该被激活并且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;

在检查初始点击时，唯一发生的事情是正文标签获得了data-ng-animate="1" 的属性。然后什么也没有发生。我再次单击，然后正文标签有一个新类menu-overlay-add。我不知道发生了什么，我很迷茫。有人可以帮我指出正确的方向，也许可以稍微澄清一下动画，或者告诉我我做错了什么？

【问题讨论】：

plunker 或 fiddle 将有助于更好地识别问题

这对你有用吗？

【参考方案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