javascript - 在 $routeChangeStart 上添加 css 类不会触发动画(除非在 setTimeout 中)

Question

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

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

如您所见，它目前可以正常工作(耶)。但是我对我使用的 hack 不满意。以下是相关代码:

在我的 Controller 中，我正在监听 $routeChangeStart，如果这是第一次通过，我会调用:

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

捕获两个夹子，添加具有以下 CSS 属性的 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;
}

所以 ARM (希望如此)不在屏幕上，但它们在屏幕上有动画效果。

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

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

感谢您的帮助!

Answer 1

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

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

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