在 $routeChangeStart 上添加 css class 不会触发动画（除非在 setTimeout 中）

Question

我是 Angular 的新手，所以如果我执行这些步骤中的任何一个都错了，请纠正我。

我正在尝试让我网站左侧和右侧的夹子在初始页面加载时动画化。这是在生产中：https://www.robotsidekick.com

如您所见，它目前可以正常工作（是的）。但是我对我使用的 hack 不满意。这是相关代码：

在我的控制器中，我正在监听 $routeChangeStart，如果这是第一次通过，我会调用：

setTimeout(function() {
    angular.element(document.querySelector('.robotarmleft')).addClass('animate-in');
    angular.element(document.querySelector('.robotarmright')).addClass('animate-in');
}, 0);

抓住两个夹子，添加具有以下 CSS 属性的 class animate-in：

.robotarm {
    margin-left: -2048px;
    margin-right: -2048px;
}

.animate-in {
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;

    margin-left: -1300px;
    margin-right: -1300px;
}

所以手臂（希望）在屏幕外，但它们在屏幕上有动画。

但是，如果我将 class 添加到不在 setTimeout 中的机器人手臂，则根本不会触发动画。

为什么 addClass 必须在 setTimeout 中才能工作？即使是 Angular，我是否应该在其他 onPageLoadTheFirstTime 类型中启动动画？主要是寻找正确的方法来做这种事情，而不是好吧，这个其他黑客也很有效。

感谢您的帮助！

Answer 1

首先想到的是，与 setTimeout() 相比，您应该使用 $timeout 来保持 angular 摘要循环。

超时可能是必要的，因为它在 DOM 呈现之前执行，这意味着您的 angular.element(..) 调用 return []。您必须监听在 DOM 呈现后调用的事件。类似于 ui-router's $viewContentLoaded event.

此外，使用 $timeout 来延迟代码摘要周期是解决许多问题的一种非常常见的解决方法，example。

在 $routeChangeStart 上添加 css class 不会触发动画（除非在 setTimeout 中）

Adding css class on $routeChangeStart doesn't trigger animation (unless in setTimeout)

javascript

angularjs

settimeout

css-animations

ngroute