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

【问题标题】：Adding css class on $routeChangeStart doesn't trigger animation (unless in setTimeout)在 $routeChangeStart 上添加 css 类不会触发动画（除非在 setTimeout 中）
【发布时间】：2015-05-07 21:26:55
【问题描述】：

我是 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);

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

.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;
}

所以手臂（希望）不在屏幕上，它们会在屏幕上显示动画。

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

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

感谢您的帮助！

【问题讨论】：

首先想到的是，您应该使用$timeout 与setTimeout 保持角度摘要循环。超时可能是必要的，因为它在 DOM 渲染之前执行，这意味着您的 angular.element(..) 调用返回 []。我也遇到了这个问题，但正在使用ui-router，它提供了一个名为$viewContentLoaded 的事件，直到视图被渲染后才会被调用。但是，使用$timeout 延迟代码摘要周期是解决很多问题的非常常见的解决方法example。
感谢 $timeout 提示！你应该写一个答案来获得荣誉。我很确定（但还没有写出来）问题是在 DOM 完全加载之前（正确地）添加了类。所以应用的css不会动画，它只是设置位置。因此，最好在 DOM 准备好后再做一些事情来修复它。
将钩子放入 $on($viewContentLoaded) 回调使动画按预期发生。基本上等待 DOM 准备好然后添加 css 以便实际触发转换。（我还通过使用ng-class 而不是在控制器中添加类来做更合适的角度操作）
我很高兴解决了这个问题。由于它已被确认为解决方案，因此我也将其发布为答案。编码愉快！

标签： javascript angularjs settimeout css-animations ngroute

【解决方案1】：

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

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

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

【讨论】：

请注意，未来的读者，angular.element(...) 实际上确实返回了预期的元素，尽管 DOM 尚未准备好。然而，这意味着当 DOM 被渲染时，css 类已经存在，所以没有要应用的 CSS 过渡，所以没有动画。