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

Question

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

注意：所有div都已应用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. 你可以看一下这个角度模块的源代码（或者只是使用它）：https://github.com/ajoslin/angular-mobile-nav它可以完成类似于你想要实现的滑动过渡。

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