使用 AngularJS 加载 HTML 元素后，如何将一个类添加到该元素中？

Question

我正在开发一个单页设计作品集网站，该网站应该具有以下页面流程。

注意：所有divs 都应用了transition: .3s ease;。

1. 访问者单击nav 链接（将加载新视图）

2. 新视图加载到主容器div。

   注意：它会应用margin-right: -100%;，以便它会从页面加载到右侧。

3. 先前存在的视图被应用到margin-left: -100%;，所以 它完全离开页面视图。

   同时新视图获得margin-right: 0;，这样它 从右侧滑入页面视图。

如何在 AngularJS 中编写上述过程？

Answer 1

你有很多选择。

1. 您可以制作自定义指令。通常，当您与 DOM 交互时，您会在指令的链接函数中这样做。请参阅directive guide。
2. 您可以使用像 AngularUI 这样支持一些基本动画的库 (Here is a demo)。
3. 您可以使用 Angular 1.1.x（不稳定）版本，其中包括对动画的支持，并且有一些示例可以做您想做的事情（查看 $animate 服务）。
4. 您可以查看源代码（或直接使用）此 Angular 模块：https://github.com/ajoslin/angular-mobile-nav，它会执行类似于您想要实现的滑动转换。

我个人认为#1 是最好的，因为它可以帮助你学习指令。如果这是一个个人网站，那么#3 可能是最好的选择，因为 $animate 服务正是您想要的，您可以使用不稳定的分支。