css - 使用 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 交互时，您会在指令的链接函数中这样做。请参阅指令指南。
2. 你可以使用像 AngularUI 这样支持一些基本动画的库（这是一个演示）。
3. 您可以使用 Angular 1.1.x（不稳定）版本，其中包括对动画的支持，并且有一些示例可以做您想做的事情（查看$animate服务）。
4. 您可以查看源代码（或仅使用）此 Angular 模块：https ://github.com/ajoslin/angular-mobile-nav ，它执行类似于您想要实现的滑动转换。

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